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

.tools-hero {
    display : flex;
    flex-direction : column;
    gap : var(--s-3);
    padding-block : var(--s-6)
}

.tool-faq-header *,
.tool-service-card *,
.tool-service-header *,
.tools-hero * {
    margin : 0px
}


.hero-labels {
    display : flex;
    flex-direction : row;
    gap : var(--s-4)
}

.hero-labels span {
    display : flex;
    align-items : center;
    justify-content : center;
    padding : 0px var(--s-3);
    background : var(--l-bg);
    border-radius : var(--r-lg);
    font-size : 12px;
    border : 1px solid var(--l-border);
    color : var(--l-text-2);
    font-family : var(--font-mono)
}

    .hero-labels span::before {
        display : block;
        content : "";
        background : var(--pb-green);
        border-radius : 50%;
        height : 6px;
        width : 6px;
        margin-right : var(--s-2)
    }

.tools {
    display : flex;
    flex-direction : column;
    gap : var(--s-6)
}

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

.tool-service-header {
    display : flex;
    flex-direction : row;
    gap : var(--s-3);
    align-items : flex-start;
}

    .tool-service-header div {
        display : flex;
        flex-direction : column;
    }

    .tool-service-header span {
        background : color-mix(in srgb, var(--pb-green) 10%, transparent);
        margin-block: auto;
        height : 100%;
        width : fit-content;
        display : flex;
        align-items : center;
        padding : var(--s-2);
        justify-content : center;
        flex-shrink : 0;
        border-radius : var(--r-md)
    }

        .tool-service-header span svg {
            height : 22px;
            width : 22px;
            stroke: var(--pb-green);
            stroke-width : 2px;
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
    

    .tool-service-header div p {
        color : var(--l-text-2);
        font-size : 14px
    }

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

.tool-service-card {
    transition: border-color var(--d-base) var(--ease), transform var(--d-base) var(--ease), background var(--d-base) var(--ease);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    background: var(--l-bg);
    border-radius: var(--r-md);
    padding: var(--s-4);
    border: 1px solid var(--l-border);
    font-size: 14px;
    color: var(--l-text-2)
}

.tool-service-card.soon {
    opacity : 0.55;
    cursor : default
}

    .tool-service-card.soon:hover {
        text-decoration : none
    }

    .tool-service-card:not(.soon):hover {
        border-color: var(--d-border);
        transform: translateY(-2px);
        text-decoration : none
    }

    .tool-service-card:not(.soon):hover div {
        background : color-mix(in srgb, var(--pb-green) 10%, transparent)
    }

    .tool-service-card:not(.soon):hover span {
        color : var(--pb-green)
    }

    .tool-service-card:not(.soon):hover div svg,
    .tool-service-card:not(.soon):hover span svg {
        stroke: var(--pb-green);
    }

    .tool-service-card:not(.soon):hover span {
        gap : var(--s-3)
    }

    .tool-service-card div {
        transition: background var(--d-base) var(--ease);
        height : 50px;
        width: 50px;
        display: flex;
        background: var(--l-surface);
        border-radius: var(--r-md);
        justify-content: center;
    }

.tool-service-card div svg {
    fill : none;
    width : 100%;
    height : 100%;
    padding : 12px;
    stroke : var(--l-text);
    stroke-width : 1.5
}

.tool-service-card span {
    transition : gap var(--d-fast) var(--ease);
    display : flex;
    margin-top : auto;
    flex-direction : row;
    align-items : center;
    gap : var(--s-2);
    font-family : var(--font-mono);
    color : var(--l-text-2);
    text-transform : uppercase;
    font-size : 12px
}

    .tool-service-card span svg {
        height : 14px;
        width: 14px;
        stroke-width: 1.8;
        fill: none;
        stroke: var(--l-text-2)
    }

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

.tool-service-card b {
    color : var(--l-text)
}

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

.tool-faq-header {
    display : flex;
    flex-direction : column;
    gap : var(--s-1)
}

    .tool-faq-header h2 {
        font-size: clamp(24px,3.4vw,34px);
        font-weight : 800
    }

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

.tool-faq-div .tool-faq-cta {
    color : var(--pb-green)
}

.tool-faq-div span {
    font-size : 12px;
    font-family : var(--font-mono);
    color : var(--l-text-2);
    text-transform : uppercase;
}

.tool-faq-item {
    border-radius : var(--r-md);
    border : 1px solid var(--l-border);
    padding-block : var(--s-2);
    padding-inline : var(--s-4);
    background : var(--l-bg)
}

.tool-faq-question {
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content : space-between;
    padding-block : var(--s-3);
    font-weight : 600;
    text-align : left;
    width : 100%;
    background : transparent;
    border : none;
    outline : none;
    transition : color var(--d-base) var(--ease);
}

.tool-faq-question.is-open svg {
    stroke : var(--pb-green);
    transform : rotate(180deg)
}

.tool-faq-question:hover {
    color : var(--pb-green);
}

    .tool-faq-question:hover,
    .tool-faq-question:focus {
        outline: none;
        border: none
    }

.tool-faq-question svg {
    transition : transform var(--d-base) var(--ease), stroke var(--d-base);
    height : 15px;
    width : 15px;
    fill : none;
    stroke : var(--l-text-2)
}

.tool-faq-answer {
    display : grid;
    grid-template-rows : 0fr;
    opacity : 0;
    transition : grid-template-rows var(--d-base) var(--ease), opacity var(--d-base) var(--ease);
    color : var(--l-text-2);
    font-size : 14px
}

.tool-faq-answer div {
    overflow : hidden
}

.tool-faq-answer.is-open {
    grid-template-rows : 1fr;
    opacity : 1
}

.tool-faq-cta {
    transition: gap var(--d-base) var(--ease), padding var(--d-base) var(--ease);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--s-2);
    justify-content: flex-start;
    margin-bottom : 1rem
}

.tool-faq-cta:hover {
    text-decoration : none;
    gap : var(--s-3);
    padding-left : var(--s-2)
}

.tool-faq-cta svg {
    stroke : var(--pb-green);
    stroke-width : 1.5;
    height : 14px;
    fill : none;
    width : 14px;
}

.aviso-final p {
    font-family : var(--font-mono);
    color : var(--l-text-2);
    text-align : center;
    font-size : 14px
}

@media (max-width:760px) {

    h1 {
        font-size: calc(56px * 0.8)
    }

    .tool-service-grid {
        grid-template-columns : repeat(1,1fr)
    }

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

    .hero-labels span {
        width : fit-content
    }

}