h1 {
    font-weight : 750;
    font-size : 45px
}

section.gray {
    background : var(--l-surface)
}

.hero {
    background: linear-gradient(90deg, var(--l-bg) 0%, var(--l-bg) 66%, var(--pb-red-soft) 100%);
}

.header-section {
    display : flex;
    flex-direction : column;
    gap : var(--s-5)
}

.header-section * {
    margin-block : 0px
}

.header-badges {
    display : flex;
    flex-direction : row;
    gap : var(--s-2);
    align-items : center
}

.header-badges span {
    font-family : var(--font-mono);
    text-transform : uppercase;
    color : var(--l-text);
    font-size : 11px;
    font-weight : 500;
    gap : var(--s-2);
    display : flex;
    align-items : center;
    align-content : center
}

    .header-badges span b {
        font-weight : 900;
    }

.header-badges span.red {
    color : var(--pb-red)
}

.header-content {
    width : 100%;
    height : fit-content;
    display : grid;
    grid-template-columns : repeat(2,1fr)   
}

    .header-content img {
        width: 100%;
        margin-left: var(--s-7);
        object-fit: contain;
        object-position: top;
        padding: var(--s-5);
    }

.subheader {
    color : var(--l-text-2)
}

.subheader b {
    color : var(--l-text)
}

.header-block {
    display : flex;
    flex-direction : column;
    gap : var(--s-5)
}

.header-block * {
    margin :0px
}

.CTA-Badges {
    display : flex;
    flex-direction : column
}

.CTA-Badges .Lined {
    display : flex;
    flex-direction : row;
    justify-content : center;
    gap : var(--s-4);
    padding-bottom : var(--s-5);
    border-bottom : 2px solid var(--d-border)
}

    .CTA-Badges .Lined span {
        color: var(--l-text-2)
    }

    .CTA-Badges .Lined span b {
        color: var(--l-text)
    }

.CTA-Badges .Spaced {
    gap : var(--s-3);
    display : grid;
    grid-template-columns : repeat(3,1fr);
    padding-top : var(--s-3);
    font-family : var(--font-mono)
}

.CTA-Badges .Spaced span {
    color : var(--l-text);
    font-weight : bold
}

.CTA-Badges .Spaced p {
    color : var(--l-text-2);
    font-size : 14px
}

.header-warning {
    padding-left : var(--s-3);
    color : var(--l-text-2);
    border-left : 3px solid var(--pb-red)
}

    .header-warning b {
        color : var(--l-text)
    }

.header-warning-2 {
    padding-left : var(--s-3);
    border-radius : var(--r-md);
    background : var(--l-surface-2);
    padding-block : var(--s-2);
    width : 100%;
    max-width : 100% !important
}


.section-header {
    display : flex;
    flex-direction : column;
    gap : var(--s-3);
    border : none
}

    .section-header * {
        margin : 0px
    }

.section-header span {
    text-align : left;
    color : var(--pb-red);
    font-family : var(--font-mono);
    text-transform : uppercase;
    font-size : 12px;
    display : flex;
    flex-direction : row;
    align-items : center
}

.section-header span:before {
    display : block;
    content : "";
    border-radius : 100%;
    background : var(--pb-red);
    height : 6px;
    margin-right : var(--s-2);
    width : 6px
}

.section-header p {
    color : var(--l-text-2);
    max-width : 760px
}

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

.services-grid .grid-card {
    overflow : hidden;
    border-radius : var(--r-lg);
    display : flex;
    flex-direction : column;
    border : 1px solid var(--l-border);
    row-rule : 1px solid var(--l-border);
    transition : all var(--d-base)
}

    .services-grid .grid-card .content {
        padding: var(--s-3);
        display : flex;
        flex-direction : column;
        gap : var(--s-2);
        margin-bottom : auto;
        flex-grow : 1
    }

    .services-grid .grid-card .content div {
        display : flex;
        flex-direction : column;
        gap : var(--s-2);
        margin-bottom : var(--s-4)
    }

    .services-grid .grid-card .content div span {
        background : var(--l-surface-2); 
        width : fit-content;
        padding : var(--s-1) var(--s-2);
        color : var(--l-text-2);
        border-radius : var(--r-md);
        font-size : 12px;
        transition : all var(--d-base) var(--ease);
    }

        .services-grid .grid-card .content .Action {
            color: var(--pb-red);
            font-size: 13px;
            font-family: var(--font-mono);
            text-transform: uppercase;
            margin-top: auto;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .services-grid .grid-card .content .Action svg {
            height: 17px;
            width: 17px;
            fill : var(--pb-red);
            transition : margin var(--d-fast);
            margin-left : var(--s-2)
        }

    .services-grid .grid-card:hover {
        transform: translateY(-5px);
        color : initial;
        text-decoration : none;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }

        .services-grid .grid-card:hover .content div span {
            color: var(--pb-red);
            background: color-mix(in srgb, var(--pb-red) 5%, transparent)
        }

        .services-grid .grid-card:hover .content .Action svg {
            margin-left : var(--s-3)
        }

.states-grid {
    margin-block : var(--s-5);
    display : grid;
    grid-template-columns : repeat(3,1fr);
    height : fit-content;
    width : 100%;
    column-gap : var(--s-6);
    row-gap : var(--s-7);
    overflow : visible
}

.states-grid .grid-card {
    display : flex;
    background : transparent;
    flex-direction : column;
    transition : all var(--d-base);
    gap : var(--s-3)
}

    .states-grid .grid-card .content {
        padding-inline: var(--s-4);
    }

    .states-grid .grid-card .subnote {
        padding-block: var(--s-2);
        color : var(--l-text-2);
        align-self : center;
        text-wrap : balance;
        text-align : left;
        border-left : 2px solid var(--d-border);
        padding-left : var(--s-4)
    }

    .states-grid .grid-card .wrapper {
        display: flex;
        background : var(--l-bg);
        flex-direction: column;
        border-radius: var(--r-md);
        border: 1px solid var(--l-border);
    }

.states-grid .grid-card .content {
    padding-block : var(--s-4);
    display : flex;
    flex-direction : column;
    gap : var(--s-3)
}

.states-grid .grid-card .content * {
    margin : 0px
}

.states-grid .grid-card .content p {
    color : var(--l-text-2)
}

.states-grid .grid-card .content div  {
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    gap : var(--s-3);
}

    .states-grid .grid-card .content div span {
        padding: var(--s-1) var(--s-2);
        background: var(--l-surface);
        border-radius: var(--r-md);
        color: var(--l-text-2);
        transition : background var(--d-base), color var(--d-base);
        text-transform : none;
        font-family: var(--font-sans);
    }

.states-grid .grid-card .content span {
    align-items : center;
    font-family : var(--font-mono);
    text-transform : uppercase;
    color : var(--pb-red);
    font-size : 14px;
    display : flex;
    flex-direction : row;
    gap : var(--s-2);
}

.states-grid .grid-card .content span svg {
    height : 20px;
    width : 20px;
    fill : var(--pb-red);
    transition : margin var(--d-base) var(--ease)
}

.states-grid .grid-card img {
    border-top-right-radius : var(--r-md);
    width : 100%;
    border-top-left-radius : var(--r-md);
    object-fit : cover
}

    .states-grid .grid-card:hover {
        transform: translateY(-5px);
        background : transparent;
        text-decoration : none
    }

        .states-grid .grid-card:hover .wrapper {
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }

    .states-grid .grid-card:hover .content div span {
        background : color-mix(in srgb, var(--pb-red) 10%, transparent);
        color : var(--pb-red)
    }

    .states-grid .grid-card:hover span svg {
        margin-left : 10px
    }

.section-steps,
.section-included,
.section-faq,
.section-guide,
.section-companys,
.section-3,
.section-2,
.section-1 {
    margin-block : var(--s-4)
}

.section-1 {
    display : flex;
    flex-direction : column;
    gap : var(--s-3)
}

.section-1 .section-tittle {
    display : flex;
    flex-direction : column;
    margin-block : var(--s-3);
    gap : var(--s-2)
}

.section-1 .section-tittle * {
    margin : 0px
}

.section-1 .section-tittle span {
    background : var(--l-surface-2);
    padding : var(--s-2);
    border-radius : var(--r-md);
    color : var(--l-text-2);
    font-family : var(--font-mono);
    font-size : 14px;
    width : fit-content
}

.section-1 .section-tittle p {
    font-size : 16px;
    width : fit-content;
}

.section-1  .item-grid {
    display : grid;
    grid-template-columns : repeat(3,1fr);
    width : 100%;
    gap : var(--s-3)
}

    .section-1 .item-grid .item {
        display: flex;
        flex-direction: row;
        gap: var(--s-3);
        align-items: flex-start;
        padding: var(--s-3);
        border: 1px solid var(--l-border);
        border-radius: var(--r-md)
    }

        .section-1 .item-grid .item .icon {
            display : flex;
            flex-shrink : 0;
            align-items : center;
            aspect-ratio : 1/1 ;
            margin-top : var(--s-2);
            margin-bottom : auto
        }

    .section-1 .item-grid .item .icon svg {
        height : 45px;
        width : 45px;
        fill : none;
        stroke : var(--pb-red);
        stroke-width : 1.5;
        background : color-mix(in srgb, var(--pb-red) 5%, transparent);
        border-radius : var(--r-md);
    }

        .section-1 .item-grid .item div {
            gap : var(--s-1);
            display: flex;
            flex-direction: column;
        }

    .section-1 .item-grid .item div span {
        font-weight : 600;
        font-size : 16px;
        margin : 0px;
    }

    .section-1 .item-grid div p {
        color : var(--l-text-2);
        margin: 0px
    }

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

.section-2 img {
    height : 350px;
    border-radius : var(--r-md)
}

.section-2 div {
    display : flex;
    flex-direction : column;
    gap : var(--s-4)
}

.section-2 div .options {
    display : flex;
    flex-direction : column;
    gap : var(--s-2)
}

.section-2 div .options div {
    display : flex;
    flex-direction : column;
    gap : var(--s-1);
    border-bottom : 1px solid var(--l-border);
    padding : var(--s-3)
}
    .section-2 div .options div * {
        margin : 0px
    }

    .section-2 div .options div span {
        font-weight: bold
    }

    .section-2 div .options div p {
        color : var(--l-text-2)
    }

    .section-2 div .alert {
        border-left : 2px solid var(--d-border);
        padding-left : var(--s-3);
        border-radius : 0px;
        color : var(--l-text-2);
        font-style : italic
    }


.section-3 {
    display : flex;
    flex-direction : column;
    gap : var(--s-3)
}

.section-3 .selection {
    display : flex;
    flex-direction : row;
    gap : var(--s-3);
    padding : var(--s-3);
    align-items : center;
    border-radius : var(--r-md);
    border : 1px solid var(--l-border);
    transition : var(--d-base)
}

    .section-3 .selection:hover {
        transform: translateY(-2px);
        border-color : var(--d-border)
    }

    .section-3 .selection * {
        margin : 0px;
    }

.section-3 .selection span {
    background : var(--l-surface-2);
    width : 27.5px;
    height : 27.5px;
    text-align : center;
    font-family : var(--font-mono);
    border-radius : 100%;
    transition : all var(--d-base);
    border : 1px solid var(--l-border);
    align-content : center;

}

.section-companys {
    padding : var(--s-2);
    display: flex; 
    overflow-x: auto; 
    scroll-snap-type: x mandatory;
    gap: var(--s-4);
    padding-bottom: var(--s-3); 
    scroll-behavior: smooth;
}

    .section-companys::-webkit-scrollbar {
        height: 8px;
    }

    .section-companys::-webkit-scrollbar-thumb {
        background-color: var(--l-border);
        border-radius: 10px;
    }

    .section-companys .card {
        flex: 0 0 calc(25% - (var(--s-4) * 0.75));
        scroll-snap-align: start;
        display : flex;
        flex-direction: column;
        border: 1px solid var(--l-border);
        border-radius: var(--r-md);
        transition: all var(--d-base)
    }

.section-companys .card img {
    width : 100%;
    object-fit : cover;
    border-radius : var(--r-md);
    padding : var(--s-5);
    aspect-ratio : 1 / 1;
    border-bottom : 1px solid var(--l-border)
}

        .section-companys .card .content {
            display: flex;
            flex-grow: 1;
            flex-direction : column;
            gap: 14px;
            padding: var(--s-4)
        }

            .section-companys .card .content .btn {
                margin-top: auto !important;
            }

    .section-companys .card .content * {
        margin : 0px
    }

    .section-companys .card .content h3 {
        text-align : center
    }

    .section-companys .card .content div {
        display : flex;
        flex-direction : column;
        gap : var(--s-3);
    }

        .section-companys .card .content div span {
            font-family : var(--font-mono);
            display : flex;
            flex-direction : row;
            align-items : center;
            font-size : 16px;
            color : var(--l-text-2);
        }

            .section-companys .card .content div span:first-child {
                border-left: 2px solid var(--d-bg);
                padding-left: var(--s-2);
                color : var(--l-text)
            }

        .section-companys .card .content p {
            color: var(--l-text-2);
            font-family: var(--font-sans)
        }

    .section-companys .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        text-decoration : none;
    }

    .section-companys .card:hover .content h3 {
        color : var(--l-text)
    }

    .section-companys .card:hover .content div span:not(:first-child) {
        color : var(--pb-red)
    }

.section-warning {
    padding-left: var(--s-3);
    color: var(--l-text-2);
    border-left: 3px solid var(--d-border)
}

.section-warning-2 {
    margin-block : var(--s-6);
    color : var(--l-text-2);
    padding : var(--s-2) var(--s-3);
    background : var(--l-surface-2);
    width : fit-content;
    border-radius : var(--r-md)
}

.section-guide {
    display : flex;
    flex-direction : column;
    gap : var(--s-3)
}

.section-guide a {
    display : flex;
    flex-direction : row;
    background : var(--l-surface);
    width : fit-content;
    border-bottom-right-radius : var(--r-md);
    border-top-right-radius : var(--r-md);
    align-items : center;
    gap : var(--s-3);
    height : fit-content;
    border-left : 2px solid var(--d-border);
    padding : var(--s-3);
    transition : all var(--d-base)
}

    .section-guide a:hover {
        transform: translateY(-2.5px);
        color : var(--pb-red);
        text-decoration : none;
        background : color-mix(in srgb, var(--pb-red) 5%, transparent)
    }

.section-reasons {
    display : grid;
    margin-block : var(--s-6);
    grid-template-columns : repeat(2,1fr);
    background : var(--l-surface-2);
    padding : var(--s-3);
    width : 100%;
    border-radius : var(--r-md);
    row-gap : var(--s-4);
    column-gap : var(--s-5)
}

.section-reasons span {
    background : var(--l-surface);
    padding : var(--s-1);
    border-radius : var(--r-sm);
    display : flex;
    flex-direction : row;
    gap : var(--s-2);
    align-items : center;
    color : var(--l-text-2)
}

.section-reasons span::before {
    display : block;
    content : "";
    margin-left : var(--s-2);
    width : 7.5px;
    border-radius : 100%;
    background : var(--l-text-2);
    height : 7.5px;
}

.section-included {
    display : grid;
    grid-template-columns : repeat(2,1fr);
    column-gap : var(--s-4);
    row-gap : var(--s-5);
    margin-top : var(--s-5)
}

.section-included .section-card {
    transition : var(--d-base);
    display : flex;
    flex-direction : row;
    gap : var(--s-3);
    padding : var(--s-3);
    border-radius : var(--r-md);
    border : 1px solid var(--l-border);
}

.section-included .section-card div {
    display : flex;
    flex-direction : column;
    gap : var(--s-2);
    width : fit-content
}

.section-included .section-card div * {
    margin : 0px
}

.section-included .section-card div p {
    color : var(--l-text-2)
}

.section-included .section-card svg {
    aspect-ratio : 1/1;
    fill : none;
    stroke-width : 1.5;
    width : 50px;
    border-radius : var(--r-md);
    margin-bottom : auto;
    stroke : var(--pb-red);
    background : color-mix(in srgb, var(--pb-red) 5%, transparent)
}

    .section-included .section-card:hover {
        transform: translateY(3px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }

.section-steps {
    display: grid;
    list-style-type: none;
    grid-template-columns: repeat(3,1fr);
    gap: var(--s-3);
    width : 100%;
    padding : 0px
}

.section-steps .item {
    padding : var(--s-3);
    transition : all var(--d-base);
    display : flex;
    flex-direction : column;
    gap: var(--s-3);
    border-radius : var(--r-md);
    border : 1px solid var(--l-border)
}

.section-steps .item span {
    transition : all var(--d-base);
    display : flex;
    align-items : center;
    text-align : center;
    justify-content :center;
    border-radius : 100%;
    width : 60px;
    margin-inline : auto;
    aspect-ratio : 1/1;
    background : var(--l-surface-2);
    height : 60px;
    font-family : var(--font-mono);
    font-size : 28px;
    font-weight : 250;
    border : 1px solid var(--l-border)
}

.section-steps .item p {
    color : var(--l-text-2)
}

.section-steps .item div h3 {
    text-align : center
}

    .section-steps .item:hover {
        transform: translateY(5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }

    .section-steps .item:hover span {
        border-color : var(--d-border);
        color : var(--l-text);
    }

    .section-steps .item:hover div h3 {
        color : var(--pb-red)
    }

.table-1 {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--l-border);
    border-radius: var(--r-md);
    overflow: hidden;
}

    .table-1 thead {
        background: var(--l-surface-2);
    }

    .table-1 tbody {
        color : var(--l-text-2)
    }

        .table-1 thead tr th,
        .table-1 tbody tr td {
            padding: var(--s-2);
            padding-left: var(--s-5);
            text-align: left;
            border-bottom: 1px solid var(--l-border);
        }

            /* Linhas divisórias verticais (apenas colunas 1 e 2) */
            .table-1 thead tr th:first-child,
            .table-1 thead tr th:nth-child(2),
            .table-1 tbody tr td:first-child,
            .table-1 tbody tr td:nth-child(2) {
                border-right: 1px solid var(--l-border);
            }

    .table-1 tbody tr:last-child td {
        border-bottom: none;
    }

    /* Fundo intercalado nas linhas pares (2, 4, 6...) */
    .table-1 tbody tr:nth-child(even) {
        background: var(--l-surface-2);
    }


.cta-simples {
    margin-block : var(--s-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-4);
    border-radius: var(--r-lg);
    background: var(--d-bg);
    color: var(--d-text)
}

    .cta-simples p {
        color: var(--d-text-2);
        margin-top: var(--s-2)
    }

.cta-meio {
    margin-block : var(--s-5);
    display : flex;
    margin-inline : auto;
    flex-direction : column;
    width : 100%;
    gap : var(--s-2);
    justify-content : center;
}

.cta-meio a {
    max-width : 50%;
    width : 100%;
    margin-inline : auto;
    padding : 16px 18px;
    font-size : 18px
}

.cta-meio p {
    color : var(--l-text-2);
    font-size : 14px;
    text-align : center
}

@media (max-width : 760px) {

    .hero {
        background: var(--l-bg)
    }

    .header-badges {
        flex-wrap : wrap
    }

    .states-grid,
    .section-steps,
    .section-included,
    .section-reasons,
    .section-1 .item-grid,
    .services-grid,
    .header-content {
        grid-template-columns: repeat(1,1fr)
    }

    .header-content img {
        margin-left : 0px;
        padding : var(--s-1);
        margin-block : var(--s-3);
        order : 1
    }

    .table-1 {
        display: block; /* Transforma a tabela num bloco contido */
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .section-2,
    .section-companys {
        flex-direction : column;
        overflow-x : hidden
    }

    .section-2 img {
        object-fit : scale-down;
        border-radius : 15%;
        overflow : hidden
    }

    .section-3 .selection {
        flex-direction : column
    }
    
    .section-3 .selection span {
        height : auto;
        font-size : 30px;
        width : 60px;
        aspect-ratio : 1/1
    }
   
    .cta-simples {
        flex-direction : column
    }

    .cta-meio a{
        max-width : 100%
    }
    
    .cta-meio p {
        width : 100%
    }
}