#hero {
    background: radial-gradient(circle at 50% 30%, var(--wp--preset--color--contrast) 0%, var(--wp--preset--color--footer-background) 100%);
    color: #ffffff;
    position: relative;
    overflow: hidden;
    /* clip-path: ellipse(100% 100% at 50% 0%); */
    z-index: 1;

    & .hero-glow {
        position: absolute;
        inset: 0;
        background: radial-gradient(800px circle at var(--mouse-x, -999px) var(--mouse-y, -999px), color-mix(in srgb, var(--wp--preset--color--primary) 15%, transparent), transparent 40%);
        opacity: 0;
        transition: opacity 0.4s ease;
        pointer-events: none;
        z-index: 0;
    }

    &:hover .hero-glow {
        opacity: 1;
    }

    & .content {
        position: relative;
        z-index: 2;
        text-align: center;
        padding-top: calc(clamp(2rem, 5vw, 10rem) + 63.43px);

        & .span-pretext {
            color: #00a2ff;
        }

        & .page-title {
            font-size: clamp(1.8rem, 2.5vw, 3rem);
        }

        & .page-subtitle {
            margin-top: 3rem;
            color: #00a2ff;
            font-family: var(--wp--preset--font-family--manrope);
            font-size: clamp(1rem, 2.5vw, 2.5rem);
            font-weight: 600;
            letter-spacing: 1.5px;
        }

        & .cta-container {
            margin-top: 4rem;
        }
    }

    /* Elemento decorativo HUD circular - Izquierda Superior */
    &::before {
        content: '';
        position: absolute;
        width: clamp(400px, 65vw, 800px);
        height: clamp(400px, 65vw, 800px);
        top: -15%;
        left: -15%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Ccircle cx='250' cy='250' r='245' fill='none' stroke='rgba(0, 217, 255, 0.08)' stroke-width='1' stroke-dasharray='2 6'/%3E%3Ccircle cx='250' cy='250' r='220' fill='none' stroke='rgba(0, 217, 255, 0.2)' stroke-width='1.5'/%3E%3Ccircle cx='250' cy='250' r='200' fill='none' stroke='rgba(0, 217, 255, 0.04)' stroke-width='20' stroke-dasharray='60 40'/%3E%3Cpath d='M250 5 L245 15 L255 15 Z M250 495 L245 485 L255 485 Z M5 250 L15 245 L15 255 Z M495 250 L485 245 L485 255 Z' fill='rgba(0, 217, 255, 0.3)'/%3E%3Ccircle cx='250' cy='250' r='180' fill='none' stroke='rgba(0, 217, 255, 0.1)' stroke-width='1'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 1;
        pointer-events: none;
        filter: blur(0.5px);
        animation: spinBackground 180s linear infinite;
    }

    /* Elemento decorativo HUD circular - Derecha Inferior */
    &::after {
        content: '';
        position: absolute;
        width: clamp(300px, 55vw, 650px);
        height: clamp(300px, 55vw, 650px);
        bottom: 0%;
        right: -10%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Ccircle cx='250' cy='250' r='240' fill='none' stroke='rgba(0, 217, 255, 0.12)' stroke-width='1'/%3E%3Ccircle cx='250' cy='250' r='230' fill='none' stroke='rgba(0, 217, 255, 0.06)' stroke-width='12' stroke-dasharray='40 100'/%3E%3Cpath d='M250 20 L250 5 M250 480 L250 495 M20 250 L5 250 M480 250 L495 250' stroke='rgba(0, 217, 255, 0.4)' stroke-width='2'/%3E%3Ccircle cx='250' cy='250' r='190' fill='none' stroke='rgba(0, 217, 255, 0.2)' stroke-width='0.5' stroke-dasharray='2 2'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 1;
        pointer-events: none;
        filter: blur(1px);
        animation: spinBackgroundReverse 150s linear infinite;
    }

    /* Estilo de subrayado estilo trazo de lápiz moderno para <u> */
    & u {
        text-decoration: none;
        position: relative;
        display: inline-block;
        color: inherit;

        &::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -6px;
            width: 100%;
            height: 12px;

            /* Degradado cilíndrico 3D para darle volumen al cuerpo físico del trazo */
            background: linear-gradient(to bottom,
                    color-mix(in srgb, var(--wp--preset--color--focus) 85%, white) 0%,
                    var(--wp--preset--color--focus) 45%,
                    color-mix(in srgb, var(--wp--preset--color--focus) 70%, black) 100%);

            /* Máscara con doble trazo de lápiz esbozado (Dual sketchy stroke) para un aspecto no plano y realista */
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M2,4 Q25,1 50,5 T98,4' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M5,8 Q32,5 65,8 T95,6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' opacity='0.75'/%3E%3C/svg%3E");
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M2,4 Q25,1 50,5 T98,4' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M5,8 Q32,5 65,8 T95,6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' opacity='0.75'/%3E%3C/svg%3E");
            mask-size: 100% 100%;
            -webkit-mask-size: 100% 100%;
            mask-repeat: no-repeat;
            -webkit-mask-repeat: no-repeat;

            /* Animación de entrada de izquierda a derecha */
            transform-origin: left center;
            transform: scaleX(0);
            animation: drawUnderline 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
            animation-delay: 0.6s;
        }
    }
}

/* Animación para el trazo de lápiz */
@keyframes drawUnderline {
    to {
        transform: scaleX(1);
    }
}

@media (width < 600px) {
    #hero {
        clip-path: ellipse(200% 100% at 50% 0%);
    }
}

@media (width > 1024px) {
    #hero {
        & .content {
            & .types-container {
                grid-template-columns: repeat(4, 1fr);
                max-width: 960px;
            }
        }
    }
}

/* Animaciones para los elementos decorativos tecnológicos */
@keyframes spinBackground {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes spinBackgroundReverse {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}