/*-----------------------------------*\
         ESTILOS PERSONALIZADOS
        \*-----------------------------------*/
        :root {

            /*colores*/

            --sky-blue-crayola: hsl(188, 64%, 60%);
            --raisin-black_90: hsla(240, 8%, 12%, 0.9);
            --raisin-black-1: hsl(240, 8%, 17%);
            --raisin-black-2: hsl(240, 8%, 12%);
            --majorelle-blue: hsl(241, 77%, 63%);
            --blue-ryb_80: hsla(241, 88%, 60%, 0.8);
            --bittersweet: hsl(0, 100%, 69%);
            --eerie-black: hsl(0, 0%, 13%);
            --ghost-white: hsl(230, 60%, 98%);
            --light-gray: hsl(0, 0%, 80%);
            --slate-gray: hsl(225, 8%, 48%);
            --cool-gray: hsl(225, 11%, 59%);
            --gainsboro: hsl(217, 16%, 90%);
            --mustard: hsl(47, 100%, 69%);
            --white: hsl(0, 0%, 100%);
            --black: hsl(0, 0%, 0%);
            --onyx: hsl(240, 5%, 26%);
            --jet: hsl(0, 0%, 21%);

            /*gradiente*/

            --gradient: radial-gradient(ellipse at center, hsla(0, 0%, 0%, 0.25), transparent 80%);

            /*fuente*/
            --ff-Raleway: "Raleway", sans-serif;

            --ff-dm-sans: 'DM Sans', sans-serif;

            --fs-1: 4rem;
            --fs-2: 3.5rem;
            --fs-3: 2.4rem;
            --fs-4: 2.2rem;
            --fs-5: 2rem;
            --fs-6: 1.8rem;
            --fs-7: 1.7rem;
            --fs-8: 1.5rem;
            --fs-9: 1.4rem;

            --fw-500: 500;
            --fw-700: 700;

            /*espaciado*/

            --section-padding: 100px;

            /*sombra*/

            --shadow-1: 0px 2px 50px hsla(223, 40%, 76%, 0.3);
            --shadow-2: 0px -2px 12px hsl(252, 29%, 93%);
            --shadow-3: 0px 4px 4px hsla(231, 20%, 49%, 0.06);
            --shadow-4: 0px 15px 30px hsla(210, 30%, 32%, 0.05);
            --shadow-5: 0px 15px hsla(241, 62%, 34%, 0.04);

            /*radius*/

            --radius-8: 8px;
            --radius-10: 10px;
            --radius-15: 15px;
            --radius-20: 20px;

            /*transiciones*/

            --transition-1: 0.25s ease;
            --transition-2: 0.5s ease;
            --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
            --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);

        }

        /*-----------------------------------*\
            RESETEO
        \*-----------------------------------*/

        *,
        *::before,
        *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        li { list-style: none; }

        a,
        img,
        span,
        input,
        button,
        ion-icon { display: block; }

        a {
            color: inherit;
            text-decoration: none;
        }

        img { height: auto; }

        input,
        button {
            background: none;
            border: none;
            font: inherit;
        }

        input { width: 100%; }

        button { cursor: pointer; }

        ion-icon { pointer-events: none; }

        html {
            font-family: var(--ff-Raleway);
            font-size: 10px;
            scroll-behavior: smooth;
        }

        body {
            background-color: var(--white);
            color: var(--slate-gray);
            font-size: 1.6rem;
            line-height: 1.75;
        }

        :focus-visible { outline-offset: 4px; }

        ::-webkit-scrollbar { width: 10px; }

        ::-webkit-scrollbar-track { background-color: hsl(0, 0%, 98%); }

        ::-webkit-scrollbar-thumb { background-color: hsl(0, 0%, 80%); }

        ::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); }


        /*-----------------------------------*\
            ESTILOS REUTILIZABLES
        \*-----------------------------------*/

        .container { padding-inline: 15px; }

        .section { padding-block: var(--section-padding); }

        .h1,
        .h2 { letter-spacing: -1px; }

        .h1 {
        color: var(--black);
        font-size: var(--fs-1);
        line-height: 1.1;
        }

        .h2,
        .h3 { color: var(--raisin-black-1); }

        .h2 {
        font-size: var(--fs-2);
        line-height: 1.2;
        }

        .h3 {
        font-size: var(--fs-3);
        line-height: 1.3;
        font-weight: var(--fw-500);
        }

        .has-before,
        .has-after {
        position: relative;
        z-index: 1;
        }

        .has-before::before,
        .has-after::after {
        content: "";
        position: absolute;
        }

        :is(.h1, .h2) .has-before { display: inline-block; }

        :is(.h1, .h2) .has-before::before {
        bottom: 8px;
        left: 0;
        width: 100%;
        height: 6px;
        background-color: var(--bittersweet);
        z-index: -1;
        }

        .btn {
        max-width: max-content;
        font-weight: var(--fw-700);
        height: 55px;
        display: flex;
        align-items: center;
        padding-inline: 50px;
        border-radius: var(--radius-10);
        overflow: hidden;
        transition: var(--transition-2);
        }

        .btn::before,
        .btn::after {
        right: 0;
        width: 100%;
        height: 50%;
        transform: scaleX(0);
        background-color: var(--majorelle-blue);
        color: var(--white);
        z-index: -1;
        transition: transform var(--transition-1);
        }

        .btn::before {
        top: 0;
        transform-origin: left;
        }

        .btn::after {
        top: 50%;
        transform-origin: right;
        }

        .btn:is(:hover, :focus)::before,
        .btn:is(:hover, :focus)::after { transform: scaleX(1); }

        .btn:is(:hover, :focus)::before { transform-origin: right; }

        .btn:is(:hover, :focus)::after { transform-origin: left; }

        .btn-primary {
        background-color: #da2b36;
        color: var(--white);
        }

        .btn-primary:is(:hover, :focus) { color: var(--white); }

        .btn-secondary {
        background-color: #da2b36;
        color: var(--white);
        gap: 15px;
        }

        .btn-secondary::before,
        .btn-secondary::after { background-color: var(--sky-blue-crayola); }

        .btn-secondary:is(:hover, :focus) { color: var(--white); }

        .social-list { display: flex; }

        .w-100 { width: 100%; }

        .section-subtitle {
        color: var(--cool-gray);
        font-size: var(--fs-6);
        font-weight: var(--fw-500);
        line-height: 1.2;
        }

        .section-subtitle::before {
        position: static;
        width: 12px;
        height: 12px;
        background-color: #3880ff;
        display: inline-block;
        border-radius: 50%;
        margin-inline-end: 10px;
        }

        .text-center { text-align: center; }

        .section-title { margin-block: 30px 50px; }

        .grid-list {
        display: grid;
        gap: 30px;
        }

        .img-holder {
        aspect-ratio: var(--width) / var(--height);
        /*background-color: var(--light-gray);*/
        overflow: hidden;
        }

        .img-cover {
        width: 100%;
        height: 100%;
        object-fit: cover;
        }

        .has-bg-image {
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        }