/* IMPORT EXTERNAL CSS */
@import url(/styles/resetDocument.css);
@import url(/styles/colors.css);
@import url(/styles/typography.css);
@import url(/styles/extras.css);

/* IMPORT COMPONENTS CSS */
@import url(/styles/components.css);

/* ESTILOS GENERALES */
* {
    --transition: all 240ms ease;
    --mini-transition: all 160ms ease;

    --gradient-title: linear-gradient(90deg, var(--quaternary) 0%, var(--zero) 25%, var(--zero) 75%, var(--quaternary) 100%);
    --gradient-title-alt: linear-gradient(90deg, var(--zero) 25%, var(--quaternary) 50%, var(--zero) 75%);

    /* outline: 1px solid red; */
}

body {
    background: var(--surface);
    color: var(--primary);
    position: relative;
}

section {
    padding-inline: var(--padding-inline-father-container);
    display: flex;
    flex-direction: column;
    gap: var(--gap-container);
    align-items: center;
}

.avatar {
    height: 3.75rem;
    object-fit: cover;
    aspect-ratio: 1/1;
    border: 2px solid #fff;
    border-radius: var(--radii-large);
}

.opacity-none {
    opacity: 0;
    transition: var(--mini-transition);
}

.container {
    position: relative;
    width: 100%;
    max-width: var(--breakpoint-max-width-container);
    display: flex;
    flex-direction: column;
    gap: var(--gap-container);
    align-items: center;
}

.display-flex {
    display: flex;
}

.max-width-children {
    max-width: var(--breakpoint-max-width-small);
}

.artifact-before-title {
    --color: var(--blue-900);

    position: relative;
    width: 100%;
    max-width: 27.5rem;
    display: flex;
    gap: .5rem;
    padding-block: .75rem;
    justify-content: center;

    &::before {
        content: '';
        position: absolute;
        top: -6.5rem;
        left: 0;
        width: 150%;
        aspect-ratio: 1/1;
        left: 50%;
        transform: translateX(-50%);
        background-image: url(/assets/svg/light-resource.svg);
        background-size: contain;
        z-index: -1;
    }

    .bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.75) 25%, #FFF 50%, rgba(255, 255, 255, 0.75) 75%, rgba(255, 255, 255, 0.00) 100%);
        ;
        mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.75) 25%, #FFF 50%, rgba(255, 255, 255, 0.75) 75%, rgba(255, 255, 255, 0.00) 100%);
        ;

        .bg-color {
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, var(--emerald-50) 0%, var(--blue-200, ) 33%, var(--purple-300) 66%, var(--red-50) 100%);
        }

        .border {
            position: absolute;
            width: 100%;
            height: 100%;
            border-top: 2px solid transparent;
            border-bottom: 2px solid transparent;
            border-image: linear-gradient(90deg, var(--emerald-300) 0%, var(--blue-500, ) 33%, var(--purple-500) 66%, var(--red-300) 100%);
            border-image-slice: 1;
        }

        .texture {
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: url(/assets/img/texture-noise.webp);
            background-size: 5rem;
            background-repeat: repeat;
            mix-blend-mode: overlay;
            opacity: .5;
        }
    }
}

.section-title {
    text-align: center;
    margin-block: var(--gap-container);

    span {
        background: var(--gradient-title);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.divider {
    width: 100%;
    height: 1px;
    background: var(--on-surface-high);
}

.light-section {
    max-width: 90rem;
    display: flex;
    padding-block: var(--padding-inline-father-container);
    position: relative;
    background: var(--surface);
    color: var(--primary);
    border-radius: var(--radii-x-large);
    margin: auto;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: var(--url-bg);
        background-repeat: repeat;
        background-size: 10rem;
        mix-blend-mode: overlay;
        border-radius: inherit;
    }
}

/* ESTILOS DE INDEX */

/* ESTILOS DE BG'S */
.bg {
    z-index: -1;
}

/* ESTILOS DE NAVIGATION BAR */
.navigation {
    display: grid;
    place-items: center;
    padding-top: 2rem;
    position: fixed;
    width: 100%;
    z-index: 10;
    transition: var(--mini-transition);
    container-type: inline-size;

    .container {
        max-width: 60rem;
        height: 100%;
        padding: 16px;
        gap: var(--gap-container, 24px);
        display: flex;
        flex-direction: row;
        justify-content: stretch;
        -webkit-backdrop-filter: blur(24px);
        backdrop-filter: blur(24px);
        border-radius: var(--radii-large);

        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            border: 1px solid var(--border-high);
            opacity: 0.8;
            background: var(--surface-alt-low);
            z-index: -1;
        }
    }

    div {
        display: flex;
        width: 100%;
    }
}

.logo-container {
    img {
        height: 2.5rem;
    }
}

.tabs-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    color: var(--tertiary);

    a {
        display: flex;
        align-items: center;
        padding-inline: 1rem;
        min-height: 2.5rem;
        border-radius: var(--radii-full);
        border: 1px solid transparent;
        transition: var(--mini-transition);

        &:hover {
            background-color: var(--surface-alt-high);
            border: 1px solid var(--border-high);
            color: var(--primary);
            transition: var(--mini-transition);
        }
    }
}

.buttons-container {
    justify-content: flex-end;

    .button.cta {
        height: 2.5rem;
        padding-inline: 0.875rem;
        border-width: var(--stroke-medium);
        border-radius: var(--radii-medium);

        span {
            padding-inline: 0;
        }

        .icon {
            min-width: 1.25rem;
        }
    }
}

/* ESTILOS DE HERO */

.hero {
    --height-navigation: 6.5rem;

    position: relative;
    padding-block: var(--padding-block-father-container);
    padding-block-start: calc(var(--height-navigation) + var(--padding-block-father-container));

    &::before {
        content: '';
        position: absolute;
        background-image: url(/assets/svg/bg-hero.svg);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 90rem;
        top: 0;
        left: 0;
        width: 100%;
        height: 63.5rem;
    }
}

.hero-phrase {
    gap: .5rem;
    align-items: center;
    justify-content: center;
    color: var(--tertiary);
    flex-wrap: wrap;
}

.hero-avatar {
    img {
        width: 1.750rem;
        object-fit: contain;
        aspect-ratio: 1/1;
        border: 2px solid var(--surface);
        border-radius: var(--radii-full);

        &:nth-child(1) {
            border-color: var(--surface-alt-low);
        }

        &:not(:first-of-type) {
            margin-inline-start: -.5rem;
        }
    }
}

.hero-text {
    color: var(--zero);
    text-align: center;
    flex-direction: column;
    gap: inherit;
    margin-block-end: 1.5rem;

    h1 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        row-gap: 1rem;
        column-gap: 0.625rem;
    }

    .avatar {
        margin-inline: 0.375rem;

        &:first-of-type {
            aspect-ratio: 3/2;
        }
    }

    span[class="accent-xxlarge"] {
        --custom-gradient: linear-gradient(90deg, var(--zero) 25%, var(--quaternary) 50%, var(--zero) 75%);

        background: var(--custom-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    p {
        color: var(--secondary);
    }
}

.hero-buttons {
    gap: inherit;
}

/* ESTILOS DE SERVICES MINI */
.services-pills {
    margin: auto;
    margin-block: var(--padding-inline-father-container);
    padding-inline: 0;
    position: relative;
    overflow: hidden;
    max-width: 90rem;

    &::before {
        content: '';
        position: absolute;
        left: 0;
        width: 5rem;
        height: 100%;
        background: linear-gradient(90deg, var(--surface) 0%, transparent 100%);
        z-index: 1;
    }

    &::after {
        content: '';
        position: absolute;
        right: 0;
        width: 5rem;
        height: 100%;
        background: linear-gradient(270deg, var(--surface) 0%, transparent 100%);
        z-index: 1;
    }

    .container {
        max-width: initial;
        align-items: flex-start;
    }
}

.row-big-pill {
    display: inline-flex;
    width: max-content;
    gap: 1.5rem;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    &:first-child {
        --animation-speed: 120s;
        animation: scroll-left var(--animation-speed) linear infinite;
    }

    &:nth-child(2) {
        --animation-speed: 120s;
        animation: scroll-right var(--animation-speed) linear infinite;
        align-self: flex-end;
    }
}

/* ANIMACION DE SERVICES MINI */

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-232rem/2));
        /* 232rem es el ancho del contenedor */
    }
}

@keyframes scroll-right {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(192rem/2));
        /* 192rem es el ancho del contenedor */
    }
}

/* ESTILOS DE PROJECT CARDS */
.projects {
    position: relative;
    padding-block: var(--padding-block-father-container);

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(/assets/svg/bg-projects.svg);
        background-repeat: no-repeat;
        background-size: 90rem;
        background-position: top center;
        z-index: -1;
    }
}

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

.project-card {
    position: relative;
    min-width: 20rem;
    max-width: 25rem;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 2px solid var(--on-surface-high);
    border-radius: var(--radii-x-large);
    padding: 1.5rem;
    gap: 1rem;
    transition: var(--transition);

    &::before {
        content: '';
        position: absolute;
        top: 68px;
        left: 50%;
        width: 12.5rem;
        transform: translateX(-50%);
        aspect-ratio: 1/1.2;
        background-image: var(--url);
        filter: blur(56px);
        opacity: .8;
    }

    &>.image-card,
    &>.main-card,
    &>.pills-card {
        z-index: 2;
    }
}

.image-card {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: var(--radii-medium);
    margin-block-end: .5rem;
    border: 1px solid var(--border-high);
}

.main-card {
    display: flex;
    align-items: start;
    gap: .75rem;

    img {
        width: 3rem;
        aspect-ratio: 1/1;
        border: 1px solid var(--border-high);
        border-radius: var(--radii-medium);
    }

    .text-container {
        display: flex;
        flex-direction: column;
        gap: .25rem;
        color: var(--primary);

        :last-child {
            color: var(--tertiary);
        }
    }
}

.pills-card {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.cta-card {
    position: relative;
    width: inherit;
    min-width: 20rem;
    max-width: 25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow: hidden;
    background: var(--surface);
    border-radius: var(--radii-x-large);
    border: 2px solid var(--on-surface-high);
    transition: var(--transition);

    .bg {
        background-image: url(/assets/svg/bg-cta-card.svg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 0;

        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url(/assets/img/bg-cta-card-texture.webp);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            mix-blend-mode: soft-light;
            opacity: .4;
        }
    }
}

/* INTERACCIONES DE PROJECT CARDS */

.project-card:hover {
    transition: var(--transition);
    transform: translateY(-4px);

    &::before {
        transition: var(--transition);
        opacity: 1;
    }
}

.cta-card:hover {
    transition: var(--transition);
    transform: translateY(-4px);
    border-color: var(--white);
}

/* ESTILOS DE ADVANTAGES */
.advantages {
    --url-bg: url(/assets/img/texture-noise-white.webp);

    .container {
        max-width: var(--breakpoint-max-width-small);
        gap: var(--gap-container);
        padding-block: var(--padding-inline-father-container);
        align-items: start;
    }

    h4 {

        &:not(:first-of-type) {
            color: var(--quaternary);
        }

        &:last-child {
            display: inline;
            width: auto;
        }

        &:last-child {
            background: linear-gradient(90deg, var(--red-400) 0%, var(--purple-400) 50%, var(--blue-400) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
    }
}

.cta-advantages {
    text-decoration: underline;
    text-decoration-color: var(--zero);
}

/* ESTILOS DE PLANS */
.plans {
    position: relative;
    padding-block: var(--padding-block-father-container);

    &::before {
        content: '';
        position: absolute;
        left: 0;
        width: 100%;
        height: calc(100% - 200px);
        background-image: url(/assets/svg/bg-section-plans.svg);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 90rem;
        z-index: -1;
    }
}

.plans-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-container) * 3);
    align-items: center;
}

/* CONSTRUCCIÓN DE PLAN CARD */

.plan-card {
    position: relative;
    display: flex;
    background: var(--border-card);
    width: 100%;
    max-width: var(--breakpoint-max-width-small);
    padding: 2px;
    border-radius: calc(var(--radii-x-large) + 2px);
    container-type: inline-size;

    &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 90%;
        height: 50%;
        transform: translate(-50%, -85%);
        background: var(--bg-blur);
        z-index: -1;
        filter: blur(80px);
    }
}

.container-plan-card {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    border-radius: var(--radii-x-large);
    background: var(--surface);
    overflow: hidden;

    .light-blur-plan-card {
        position: absolute;
        top: 0%;
        left: 50%;
        width: 17.5rem;
        aspect-ratio: 1/2;
        transform: translate(-50%, -50%);
        background-image: var(--light-blur);
        border-radius: var(--radii-full);
        filter: blur(240px);
    }

    .bg-plan-card {
        position: absolute;
        width: 45rem;
        aspect-ratio: 1/.88;
        background-image: var(--bg-card);
        background-size: contain;
        transform: translate(-6.5rem, -13rem);
    }

    .bg-texture-plan-card {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: var(--texture-card);
        background-size: 10rem;
        background-repeat: repeat;
        mix-blend-mode: overlay;
        opacity: .2;
    }
}

.main-container-plan-card {
    display: flex;
    gap: calc(var(--gap-container) * 2);
    align-items: center;
    margin: 1.5rem;
    z-index: 1;
}

.graph-plan-card {
    height: 352px;
    padding: .75rem;

    .graph {
        position: relative;
        display: flex;
        margin: auto;

        &:nth-of-type(1) {
            width: 16.25rem;
            rotate: 6deg;
            z-index: 3;

            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                box-shadow: 0px 88px 24px 0px rgba(5, 9, 15, 0.01),
                    0px 56px 22px 0px rgba(5, 9, 15, 0.10),
                    0px 32px 19px 0px rgba(5, 9, 15, 0.35),
                    0px 14px 14px 0px rgba(5, 9, 15, 0.60),
                    0px 4px 8px 0px rgba(5, 9, 15, 0.69);
                border-radius: var(--radii-medium);
            }
        }

        &:nth-of-type(2) {
            width: 13.75rem;
            rotate: 3deg;
            translate: 0 -180px;
            z-index: 2;

            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                box-shadow: 0px 83px 23px 0px rgba(5, 12, 20, 0.01),
                    0px 53px 21px 0px rgba(5, 12, 20, 0.07),
                    0px 30px 18px 0px rgba(5, 12, 20, 0.25),
                    0px 13px 13px 0px rgba(5, 12, 20, 0.43),
                    0px 3px 7px 0px rgba(5, 12, 20, 0.49);
                border-radius: var(--radii-medium);
            }
        }

        &:nth-of-type(3) {
            width: 11.25rem;
            z-index: 1;
            translate: 0 -320px;

            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                box-shadow: 0px 83px 23px 0px rgba(5, 12, 20, 0.01),
                    0px 53px 21px 0px rgba(5, 12, 20, 0.07),
                    0px 30px 18px 0px rgba(5, 12, 20, 0.25),
                    0px 13px 13px 0px rgba(5, 12, 20, 0.43),
                    0px 3px 7px 0px rgba(5, 12, 20, 0.49);
                border-radius: var(--radii-medium);
            }
        }

        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            box-shadow: inset -2px -2px 4px 0 var(--on-surface-low),
                inset 2px 4px 8px 0 var(--gray-opacity-200),
                inset 1px 2px 4px 0 var(--gray-opacity-100),
                inset 1px 1px 2px 0 var(--gray-opacity-300);
            border: 2px solid transparent;
            border-radius: var(--radii-medium);
            opacity: .64;
        }

        img {
            width: 100%;
            aspect-ratio: 1/1;
            border-radius: var(--radii-medium);
            border: 2px solid white;
        }
    }

}

.contents-plan-card {
    display: flex;
    flex-direction: column;
    gap: var(--gap-container);

    a {
        align-self: flex-start;
    }
}

.text-container-plan-card {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    color: var(--secondary);

    h3 {
        background: var(--gradient-title-alt);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.items-container-plan-card {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem;
    border-radius: var(--radii-medium);
    color: var(--primary);
    background: var(--gray-opacity-900);
    border: 1px solid var(--on-surface-high);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);

    .item {
        display: flex;
        gap: .5rem;
        align-items: center;

        .icon {
            min-width: 1.25rem;
        }
    }
}

/* OCURRENCIAS PARA CADA PLAN */
.basic {
    --bg-card: url(/assets/svg/bg-plan-basic.svg);
    --texture-card: url(/assets/img/texture-plan-basic.webp);
    --bg-blur: linear-gradient(90deg, #6329E8 0%, #1351DF 50%, #04102E 100%);
    --light-blur: linear-gradient(to right, var(--purple-300) 0%, var(--blue-300) 100%);
    --border-card: linear-gradient(152deg, var(--purple-800) 8%, var(--blue-400) 25%, var(--blue-100) 40%, rgba(37, 40, 54, 0.00) 60%), var(--border-high);
    --color: linear-gradient(to bottom, var(--purple-800) 0%, var(--purple-500) 100%);
}

.business {
    --bg-card: url(/assets/svg/bg-plan-business.svg);
    --texture-card: url(/assets/img/texture-plan-business.webp);
    --bg-blur: linear-gradient(90deg, #021E11 0%, #08683B 50%, #10BD6C 100%);
    --light-blur: linear-gradient(to right, var(--emerald-100) 50%, var(--emerald-500) 100%);
    --border-card: linear-gradient(-152deg, var(--emerald-800) 8%, var(--emerald-400) 25%, var(--emerald-100) 40%, rgba(37, 40, 54, 0) 60%), var(--border-high);
    --color: linear-gradient(to bottom, var(--emerald-800) 0%, var(--emerald-500) 100%);

    .container-plan-card {
        .bg-plan-card {
            left: initial;
            right: 0;
            transform: translate(6.5rem, -12rem);
        }
    }

    .main-container-plan-card {
        >:nth-of-type(1) {
            order: 2;
        }

        >:nth-of-type(2) {
            order: 1;
        }
    }

    .graph-plan-card {
        >:nth-of-type(1) {
            rotate: -6deg;
        }

        >:nth-of-type(2) {
            rotate: -3deg;
        }
    }
}

.custom {
    --bg-card: url(/assets/svg/bg-plan-custom.svg);
    --texture-card: url(/assets/img/texture-plan-custom.webp);
    --bg-blur: linear-gradient(90deg, #F38B46 0%, #9C440B 50%, #351704 100%);
    --light-blur: linear-gradient(to right, var(--orange-300) 0%, var(--orange-100) 75%);
    --border-card: linear-gradient(152deg, var(--orange-800) 8%, var(--orange-400) 25%, var(--orange-100) 40%, rgba(37, 40, 54, 0.00) 60%), var(--border-high);
    --color: linear-gradient(to bottom, var(--orange-800) 0%, var(--orange-500) 100%);

    .container-plan-card {
        .bg-texture-plan-card {
            rotate: 45deg;
            width: 500%;
            height: initial;
            top: 0;
            left: 0;
            transform: translate(-45%, -5%);
            aspect-ratio: 1/1;
        }
    }
}

/* ESTILOS DE ABOUT */
.about {
    --url-bg: url(/assets/img/texture-plan-custom.webp);

    .container {
        max-width: var(--breakpoint-max-width-small);
        gap: var(--gap-container);
        padding-block: var(--padding-inline-father-container);
        align-items: start;

        h2 {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: stretch;
            gap: .75rem;

            .avatar {
                width: 3rem;
                height: 3rem;
                border-radius: var(--radii-medium);
                margin-inline: 0.5625rem;
            }

            >span {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                row-gap: inherit;
                column-gap: 0.4375rem;
            }
        }
    }
}

.text-about {
    flex-direction: column;
    color: var(--quaternary);
    gap: inherit;
    padding-block: var(--gap-container);
}

.boxes-about {
    display: flex;
    flex-direction: row;
    gap: var(--gap-container);
    flex-wrap: wrap;

    >div,
    >a {
        position: relative;
        overflow: hidden;
        width: 15rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem;
        justify-content: center;
        aspect-ratio: 1/1;
        background: var(--surface);
        border: 2px solid white;
        border-radius: var(--radii-x-large);

        &::before {
            content: '';
            position: absolute;
            top: 0%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            aspect-ratio: 1/1;
            border-radius: var(--radii-full);
            background: var(--color-blur);
            filter: blur(104px);
        }

        * {
            z-index: 1;
        }
    }
}

.phrase-about {
    --color-blur: var(--purple-100);

    p {
        &:last-of-type {
            color: var(--tertiary);
        }
    }
}

.playlist-about {
    --color-blur: var(--emerald-100);
    text-align: center;
    align-items: center;
    transition: var(--transition);

    .first-container {
        position: relative;

        img {
            border-radius: var(--radii-full);
            aspect-ratio: 1/1;
            border: 2px solid white;

            &:first-of-type {
                width: 4rem;
            }

            &:last-of-type {
                width: 1.75rem;
                position: absolute;
                right: 0;
                bottom: 0;
            }
        }
    }

    .second-container {
        flex-direction: column;
        gap: .5rem;

        p {
            &:last-of-type {
                color: var(--tertiary);
            }
        }
    }
}

.playlist-about:hover {
    transform: translateY(-4px);
    transition: var(--transition);
    border-color: var(--emerald-500);
}

/* ESTILOS DE FOOTER */
footer {
    position: relative;
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-alt-low) 50%, var(--surface-alt-medium) 100%);
    padding: var(--padding-inline-father-container);
    flex-direction: column;
    align-items: center;

    .container {
        >div {
            width: 100%;
            display: flex;
            margin-block: var(--gap-container);
        }

        .divider {
            margin: 0;
        }
    }

    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
        mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
        background-image: url(/assets/img/texture-plan-custom.webp);
        background-repeat: repeat;
        background-size: 10rem;
        mix-blend-mode: soft-light;
        opacity: .2;
    }
}

.logo-footer-container {
    --color: var(--quaternary);

    gap: var(--gap-container);
    align-items: center;
    gap: 1rem;
}

.contents-footer {
    gap: var(--gap-container);
    align-items: center;
    justify-content: center;
    color: var(--tertiary);
    justify-content: space-between;

    .buttons-group {
        gap: .75rem;
    }
}

.pill-avatar {
    display: flex;
    gap: .75rem;
    align-items: center;
    background: var(--on-surface-low);
    border: 1px solid var(--on-surface-high);
    border-radius: var(--radii-full);
    padding: .5rem;
    transition: var(--transition);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);

    img {
        width: 2rem;
        height: 2rem;
        border-radius: var(--radii-full);
        border: 1px solid var(--zero);
    }

    h5 {
        background: var(--gradient-title-alt);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        margin-inline-end: .5rem;
    }

    &:hover {
        background: var(--surface-alt-high);
        border-color: var(--on-surface-high);
        transform: translateY(-2px);
        transition: var(--transition);
    }
}

/* MEDIA QUERIES PARA RESPONSIVE DE LA WEB */
@media screen and (min-width: 745px) and (max-width: 1128px) {
    .projects-container {
        grid-template-columns: repeat(2, 1fr);

        >:nth-child(odd) {
            justify-self: right;
        }

        >:nth-child(even) {
            justify-self: left;
        }
    }
}

@media screen and (max-width: 744px) {
    .projects-container {
        grid-template-columns: 1fr;
        place-items: center;
    }

    .cta-card {
        min-height: 34.375rem;
    }
}

@media screen and (max-width: 732px) {
    .hero-buttons {
        flex-direction: column;
    }
}

@media screen and (max-width: 666px) {
    .navigation {
        width: 100vw;

        .tabs-container {
            display: none;
        }

        .buttons-container {
            a {
                span {
                    display: initial;
                }
            }
        }
    }
}

@media screen and (max-width: 660px) {

    .projects,
    .plans {
        overflow-x: clip;
    }
}

@media screen and (max-width: 604px) {
    .contents-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media screen and (max-width: 560px) {
    .navigation {
        padding-top: 1rem;
    }

    .hero-text {
        text-align: left;

        h1 {
            justify-content: start;
        }

        .avatar {
            height: 3.5rem;
        }
    }

    .hero-buttons {
        align-self: stretch;

        a {
            width: 100%;
        }
    }

    .services-pills {
        margin-block: var(--padding-block-father-container);
    }

    .about {
        & .container {
            h2 {
                .avatar {
                    width: 2.75rem;
                    height: 2.75rem;
                    margin-inline: 0.3125rem;
                }
            }
        }
    }
}

@media screen and (max-width: 543px) {
    .boxes-about {
        align-self: stretch;
        flex-direction: column;

        >div,
        >a {
            width: 100%;
            aspect-ratio: initial;
            padding-block: 3rem;

            &::before {
                opacity: .4;
            }
        }
    }
}

@media screen and (max-width: 452px) {
    .pill-avatar {
        h5 {
            display: none;
        }
    }
}

@media screen and (max-width: 412px) {
    .button.cta {
        div:last-of-type {
            display: none;
        }
    }
}

@container (max-width: 752px) {
    .plan-card {
        .graph-plan-card {
            .graph {
                &:nth-of-type(1) {
                    width: 13.75rem;
                }

                &:nth-of-type(2) {
                    width: 11.25rem;
                    translate: 0 -148px;
                }

                &:nth-of-type(3) {
                    width: 8.75rem;
                    translate: 0 -256px;
                }
            }
        }
    }

    .graph-plan-card {
        height: 18.5rem;
    }
}

@container (max-width: 674px) {
    header {
        .buttons-container {
            a {
                span {
                    display: none;
                }
            }
        }
    }
}

@container (max-width: 660px) {
    .plan-card {
        .container-plan-card {
            .main-container-plan-card {
                flex-direction: column;
                margin: .5rem;
                gap: 2rem;

                .graph-plan-card {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                    height: auto;
                    transform: translateX(-.75rem);

                    >div {
                        translate: 0;
                    }

                    >:nth-of-type(1) {
                        translate: 7.5rem 0;
                    }

                    >:nth-of-type(3) {
                        translate: -6.5rem 0;
                    }
                }
            }

            .bg-plan-card {
                transform: translate(-12rem, -13rem);
            }
        }

        .text-container-plan-card {
            h3 {
                background: none;
                -webkit-background-clip: initial;
                background-clip: initial;
                color: var(--zero);
            }
        }
    }

    .business {
        .main-container-plan-card {
            &> :nth-of-type(1) {
                order: initial;
            }

            &> :nth-of-type(2) {
                order: initial;
            }
        }

        .container-plan-card {
            .bg-plan-card {
                transform: translate(10rem, -13rem);
            }
        }
    }
}

@container (max-width: 560px) {
    .plan-card {
        a {
            align-self: stretch;
        }
    }
}

@container (max-width: 440px) {
    .plan-card {
        .container-plan-card {
            .main-container-plan-card {
                margin: 0;
                gap: 1.5rem;
            }
        }
    }

    header {
        .buttons-container {
            .button.cta {
                span {
                    display: none;
                }
            }
        }
    }
}

@container (max-width: 384px) {
    .plan-card {
        .container-plan-card {
            .main-container-plan-card {
                .graph-plan-card {
                    .graph {
                        &:nth-of-type(1) {
                            width: 11.25rem;
                            translate: 104px 0;
                        }

                        &:nth-of-type(2) {
                            width: 8.75rem;
                        }

                        &:nth-of-type(3) {
                            width: 6.25rem;
                            translate: -68px 0;
                        }
                    }
                }
            }
        }
    }
}