/* ===================================
   SCRATLOOP DIGITAL
   COMPONENTS
   UI / VISUALS / SCRATTY
=================================== */


/* =====================================================
   HERO BUTTONS
===================================================== */

.hero-buttons {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-start;

    flex-wrap:
        wrap;

    gap:
        15px;

    margin:
        0 0 40px;
}

.hero-buttons .button {
    min-width:
        180px;

    text-align:
        center;

    justify-content:
        center;
}

.hero-buttons .button.secondary {
    border:
        2px solid rgba(0,200,255,.22);

    box-sizing:
        border-box;

    box-shadow:
        0 0 15px rgba(0,200,255,.08);

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}

.hero-buttons .button.secondary:hover {
    border-color:
        rgba(0,200,255,1);

    box-shadow:
        0 0 25px rgba(0,200,255,.22);

    transform:
        translateY(-2px);
}


/* =====================================================
   GENERIC CARD
===================================================== */

.card h3 {
    margin-bottom:
        14px;

    color:
        var(--primary);
}

.card p {
    color:
        var(--text-muted);
}


/* =====================================================
   SCRATTY HERO
===================================================== */

.hero-scratty {
    position:
        relative;

    width:
        100%;

    max-width:
        650px;

    min-height:
        520px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 auto;
}

.hero-scratty::before {
    content:
        "";

    position:
        absolute;

    width:
        430px;

    height:
        430px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(0,200,255,.22),
            rgba(139,61,255,.10),
            transparent 70%
        );

    filter:
        blur(22px);

    animation:
        scrattyGlow 5s ease-in-out infinite;

    pointer-events:
        none;
}


/* =====================================================
   SCRATTY INTERFACE
   BORDE AZUL / SIN CUADRO OSCURO
===================================================== */

.scratty-interface {
    position:
        relative;

    width:
        100%;

    height:
        500px;

    padding:
        0;

    border:
        1px solid rgba(0,200,255,.25);

    border-radius:
        34px;

    background:
        transparent;

    box-shadow:
        none;

    backdrop-filter:
        none;

    overflow:
        hidden;
}


.scratty-interface::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        15%;

    width:
        70%;

    height:
        1px;

    background:
        var(--gradient);

    opacity:
        .8;

    z-index:
        20;
}


/* =====================================================
   INTERFACE TOP
===================================================== */

.interface-top {
    height:
        62px;

    padding:
        0 25px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    border-bottom:
        1px solid rgba(255,255,255,.07);

    color:
        var(--text);

    font-size:
        .82rem;

    font-weight:
        700;

    letter-spacing:
        1px;

    box-sizing:
        border-box;
}

.interface-dot {
    width:
        8px;

    height:
        8px;

    flex-shrink:
        0;

    border-radius:
        50%;

    background:
        var(--primary);

    box-shadow:
        0 0 12px var(--primary);
}

.interface-status {
    margin-left:
        auto;

    color:
        #10B981;

    font-size:
        .7rem;
}


/* =====================================================
   SCRATTY VISUAL
===================================================== */

.scratty-visual {
    position:
        relative;

    height:
        376px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;
}


/* =====================================================
   SCRATTY GLOW
===================================================== */

.scratty-glow {
    position:
        absolute;

    width:
        290px;

    height:
        290px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(0,200,255,.35),
            rgba(139,61,255,.18),
            transparent 70%
        );

    filter:
        blur(25px);

    animation:
        scrattyGlow 4s ease-in-out infinite;

    pointer-events:
        none;

    z-index:
        1;
}


/* =====================================================
   SCRATTY CHARACTER
===================================================== */

.scratty-character {
    position:
        absolute;

    left:
        50%;

    top:
        50%;

    z-index:
        5;

    width:
        190px;

    height:
        250px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    transform:
        translate(-50%, -50%)
        scale(.98);

    animation:
        scrattyFloatCentered 4s ease-in-out infinite;

    transform-origin:
        center center;
}


/* =====================================================
   ORBITS
===================================================== */

.scratty-orbit {
    position:
        absolute;

    border:
        1px solid rgba(0,200,255,.18);

    border-radius:
        50%;

    pointer-events:
        none;

    z-index:
        2;
}

.orbit-one {
    width:
        470px;

    height:
        205px;

    transform:
        rotate(-20deg);

    animation:
        orbitRotate 10s linear infinite;
}

.orbit-two {
    width:
        400px;

    height:
        175px;

    transform:
        rotate(35deg);

    border-color:
        rgba(139,61,255,.2);

    animation:
        orbitRotateReverse 14s linear infinite;
}


/* =====================================================
   HOLOGRAM CARDS
===================================================== */

.hologram-card {
    position:
        absolute;

    z-index:
        10;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    width:
        175px;

    min-width:
        175px;

    padding:
        12px 15px;

    box-sizing:
        border-box;

    border:
        1px solid rgba(0,200,255,.2);

    border-radius:
        14px;

    background:
        rgba(5,8,22,.88);

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 10px 30px rgba(0,0,0,.25);

    overflow:
        hidden;
}

.hologram-card > span {
    flex-shrink:
        0;

    font-size:
        1.05rem;

    color:
        var(--primary);
}

.hologram-card strong {
    display:
        block;

    color:
        var(--text);

    font-size:
        .68rem;

    line-height:
        1.2;

    white-space:
        nowrap;
}

.hologram-card small {
    display:
        block;

    margin-top:
        3px;

    color:
        var(--text-muted);

    font-size:
        .58rem;

    line-height:
        1.2;

    white-space:
        nowrap;
}


/* =====================================================
   HOLOGRAM POSITIONS
===================================================== */

.hologram-one {
    left:
        25px;

    top:
        78px;

    animation:
        hologramFloat 4s ease-in-out infinite;
}

.hologram-two {
    right:
        25px;

    top:
        125px;

    animation:
        hologramFloat 5s ease-in-out infinite reverse;
}

.hologram-three {
    right:
        40px;

    bottom:
        25px;

    animation:
        hologramFloat 4.5s ease-in-out infinite;
}


/* =====================================================
   INTERFACE BOTTOM
===================================================== */

.interface-bottom {
    height:
        62px;

    padding:
        0 25px;

    display:
        flex;

    align-items:
        center;

    box-sizing:
        border-box;

    border-top:
        1px solid rgba(255,255,255,.07);

    color:
        var(--text-muted);

    font-size:
        .75rem;
}

.interface-pulse {
    width:
        8px;

    height:
        8px;

    margin-left:
        auto;

    border-radius:
        50%;

    background:
        #10B981;

    box-shadow:
        0 0 12px #10B981;

    animation:
        pulseOnline 2s infinite;
}


/* =====================================================
   PACKAGE CARD
===================================================== */

.package-card {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    text-align:
        left;

    padding:
        30px;

    border:
        1px solid rgba(0,200,255,.35);

    border-radius:
        var(--radius-lg);

    background:
        rgba(255,255,255,.03);

    box-shadow:
        var(--shadow-lg);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.package-card:hover {
    transform:
        translateY(-8px);

    border-color:
        rgba(0,200,255,.75);

    box-shadow:
        0 20px 50px rgba(0,200,255,.08);
}

.package-card.featured {
    border-color:
        rgba(0,200,255,.7);

    box-shadow:
        0 0 40px rgba(0,200,255,.08);
}

.package-header h3 {
    margin:
        15px 0 10px;
}

.package-header p {
    color:
        var(--text-muted);

    line-height:
        1.7;
}

.package-badge {
    display:
        inline-flex;

    padding:
        6px 11px;

    border-radius:
        999px;

    background:
        rgba(0,200,255,.08);

    border:
        1px solid rgba(0,200,255,.18);

    color:
        var(--primary);

    font-size:
        .72rem;

    font-weight:
        700;
}

.package-body {
    display:
        flex;

    flex-direction:
        column;

    flex:
        1;

    margin-top:
        25px;
}

.package-body ul {
    padding:
        0;

    margin:
        0 0 30px;

    list-style:
        none;
}

.package-body li {
    margin-bottom:
        13px;

    color:
        var(--text-muted);

    font-size:
        .9rem;

    line-height:
        1.5;
}

.package-button {
    width:
        100%;

    margin-top:
        auto;

    text-align:
        center;
}

.packages-note {
    margin-top:
        40px;

    color:
        var(--text-muted);
}

.packages-note a {
    color:
        var(--primary);
}


/* =====================================================
   PROJECT CARD
   UTILIZADO POR PORTAFOLIO
===================================================== */

.project {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-height:
        420px;

    overflow:
        hidden;

    text-align:
        left;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.015)
        );

    border:
        1px solid rgba(0,200,255,.35);

    border-radius:
        var(--radius-lg);

    box-shadow:
        0 0 18px rgba(0,200,255,.06);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.project:hover {
    transform:
        translateY(-10px);

    border-color:
        rgba(0,200,255,.75);

    box-shadow:
        var(--shadow-lg),
        0 0 35px rgba(0,200,255,.08);
}


/* =====================================================
   PROJECT LOGO
===================================================== */

.project-logo {
    width:
        100%;

    height:
        220px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    margin-bottom:
        25px;

    box-sizing:
        border-box;

    overflow:
        hidden;

    border-radius:
        var(--radius-lg);

    background:
        #111827;

    border:
        1px solid rgba(0,200,255,.45);
}

.project-logo img {
    width:
        100%;

    height:
        100%;

    max-width:
        100%;

    max-height:
        100%;

    display:
        block;

    object-fit:
        contain;

    transition:
        transform .3s ease,
        filter .3s ease;
}

.project:hover .project-logo img {
    transform:
        scale(1.05);

    filter:
        drop-shadow(
            0 0 18px rgba(0,200,255,.20)
        );
}


/* =====================================================
   PROJECT CONTENT
===================================================== */

.project-content {
    flex:
        1;

    padding:
        0 28px 28px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;
}

.project h3 {
    margin:
        0 0 12px;

    color:
        var(--primary);
}

.project p {
    color:
        var(--text-muted);
}

.project-content > span {
    display:
        block;

    margin:
        15px 0;

    color:
        var(--primary);

    font-size:
        .8rem;
}

.project-content > a {
    color:
        var(--primary);

    font-weight:
        600;

    transition:
        color .25s ease;
}

.project-content > a:hover {
    color:
        var(--text);
}


/* =====================================================
   CONTACT BOX
===================================================== */

.contact-box {
    position:
        relative;

    padding:
        50px;

    background:
        var(--gradient-soft);

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:
        var(--radius-lg);

    overflow:
        hidden;
}

.contact-box::before {
    content:
        "";

    position:
        absolute;

    width:
        300px;

    height:
        300px;

    top:
        -180px;

    right:
        -120px;

    background:
        radial-gradient(
            circle,
            rgba(0,200,255,.15),
            transparent 70%
        );

    pointer-events:
        none;
}


/* =====================================================
   SOCIAL FOOTER
===================================================== */

.footer-social {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        24px;

    margin-bottom:
        22px;
}

.footer-social a {
    width:
        48px;

    height:
        48px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    text-decoration:
        none;

    transition:
        transform .25s ease,
        filter .25s ease;
}

.footer-social .social-facebook i,
.footer-social .social-instagram i,
.footer-social .social-whatsapp i {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #bff7ff 22%,
            #00c8ff 40%,
            #9b6cff 60%,
            #8b3dff 80%,
            #ffffff 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    color:
        transparent;
}

.footer-social .social-facebook i {
    font-size:
        1.65rem;
}

.footer-social .social-instagram i,
.footer-social .social-whatsapp i {
    font-size:
        2.25rem;
}

.footer-social a:hover {
    transform:
        translateY(-4px);

    filter:
        drop-shadow(
            0 0 10px rgba(0,200,255,.30)
        );
}


/* =====================================================
   ANIMATIONS — SCRATTY
===================================================== */

@keyframes scrattyFloatCentered {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(.98);
    }

    50% {
        transform:
            translate(-50%, calc(-50% - 10px))
            scale(.98);
    }
}


@keyframes scrattyFloatMobile {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(.82);
    }

    50% {
        transform:
            translate(-50%, calc(-50% - 8px))
            scale(.82);
    }
}


@keyframes scrattyFloatMobileSmall {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(.76);
    }

    50% {
        transform:
            translate(-50%, calc(-50% - 7px))
            scale(.76);
    }
}


@keyframes scrattyGlow {

    0%,
    100% {
        transform:
            scale(1);

        opacity:
            .7;
    }

    50% {
        transform:
            scale(1.15);

        opacity:
            1;
    }
}


@keyframes orbitRotate {

    from {
        transform:
            rotate(-20deg);
    }

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


@keyframes orbitRotateReverse {

    from {
        transform:
            rotate(35deg);
    }

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


@keyframes hologramFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-8px);
    }
}


@keyframes pulseOnline {

    0%,
    100% {
        opacity:
            .5;

        transform:
            scale(1);
    }

    50% {
        opacity:
            1;

        transform:
            scale(1.25);
    }
}


@keyframes hologramFloatCenteredMobile {

    0%,
    100% {
        transform:
            translateX(-50%)
            translateY(0);
    }

    50% {
        transform:
            translateX(-50%)
            translateY(-7px);
    }
}


/* =====================================================
   LARGE DESKTOP — 1600px+
===================================================== */

@media (min-width: 1600px) {

    .hero-scratty {
        max-width:
            700px;

        min-height:
            550px;
    }

    .scratty-interface {
        height:
            520px;
    }

    .scratty-visual {
        height:
            396px;
    }

    .package-card {
        padding:
            34px;
    }

    .project-content {
        padding:
            0 30px 30px;
    }

    .contact-box {
        padding:
            60px;
    }
}


/* =====================================================
   1200px
===================================================== */

@media (max-width: 1200px) {

    .hero-scratty {
        max-width:
            500px;
    }

    .scratty-interface {
        height:
            470px;
    }

    .scratty-visual {
        height:
            346px;
    }

    .orbit-one {
        width:
            410px;

        height:
            180px;
    }

    .orbit-two {
        width:
            350px;

        height:
            155px;
    }

    .hologram-card {
        width:
            155px;

        min-width:
            155px;
    }

    .hologram-one {
        left:
            12px;
    }

    .hologram-two {
        right:
            12px;
    }

    .hologram-three {
        right:
            20px;
    }
}


/* =====================================================
   1100px
===================================================== */

@media (max-width: 1100px) {

    .hero-scratty {
        max-width:
            620px;

        min-height:
            520px;
    }

    .scratty-interface {
        height:
            500px;
    }

    .scratty-visual {
        height:
            376px;
    }

    .hero-buttons {
        justify-content:
            center;
    }
}


/* =====================================================
   768px — MOBILE / TABLET
===================================================== */

@media (max-width: 768px) {

    .hero-buttons {
        flex-direction:
            column;

        align-items:
            center;

        width:
            100%;
    }

    .hero-buttons .button {
        width:
            100%;

        max-width:
            320px;
    }

    .hero-scratty {
        width:
            100%;

        max-width:
            430px;

        min-height:
            430px;
    }

    .scratty-interface {
        height:
            430px;

        border-radius:
            28px;
    }

    .interface-top {
        height:
            58px;

        padding:
            0 18px;
    }

    .scratty-visual {
        height:
            310px;
    }

    .interface-bottom {
        height:
            62px;

        padding:
            0 18px;
    }

    .scratty-character {
        left:
            50%;

        top:
            50%;

        width:
            190px;

        height:
            250px;

        transform:
            translate(-50%, -50%)
            scale(.82);

        animation:
            scrattyFloatMobile 4s ease-in-out infinite;
    }

    .hologram-card {
        width:
            118px;

        min-width:
            118px;

        padding:
            8px 9px;

        gap:
            6px;

        border-radius:
            12px;
    }

    .hologram-one {
        left:
            9px;

        top:
            10px;
    }

    .hologram-two {
        right:
            9px;

        top:
            10px;
    }

    .hologram-three {
        left:
            50%;

        right:
            auto;

        bottom:
            7px;

        animation:
            hologramFloatCenteredMobile 4.5s ease-in-out infinite;
    }

    .hologram-card > span {
        font-size:
            .9rem;
    }

    .hologram-card strong {
        font-size:
            .62rem;

        line-height:
            1.15;

        white-space:
            normal;
    }

    .hologram-card small {
        font-size:
            .53rem;

        line-height:
            1.1;

        white-space:
            normal;
    }

    .orbit-one {
        width:
            350px;

        height:
            160px;
    }

    .orbit-two {
        width:
            300px;

        height:
            135px;
    }

    .contact-box {
        padding:
            32px 22px;
    }

    .project {
        min-height:
            0;
    }

    .project-logo {
        height:
            190px;

        padding:
            25px;
    }

    .project-content {
        padding:
            0 24px 24px;
    }
}


/* =====================================================
   500px — SMALL MOBILE
===================================================== */

@media (max-width: 500px) {

    .hero-scratty {
        max-width:
            350px;

        min-height:
            400px;
    }

    .scratty-interface {
        height:
            400px;

        border-radius:
            24px;
    }

    .interface-top {
        height:
            58px;

        padding:
            0 15px;
    }

    .interface-bottom {
        height:
            62px;

        padding:
            0 15px;
    }

    .scratty-visual {
        height:
            280px;
    }

    .scratty-character {
        left:
            50%;

        top:
            48%;

        width:
            190px;

        height:
            250px;

        transform:
            translate(-50%, -50%)
            scale(.76);

        animation:
            scrattyFloatMobileSmall 4s ease-in-out infinite;
    }

    .hologram-card {
        width:
            112px;

        min-width:
            112px;

        padding:
            7px 8px;

        gap:
            6px;
    }

    .hologram-one {
        left:
            7px;

        top:
            8px;
    }

    .hologram-two {
        right:
            7px;

        top:
            8px;
    }

    .hologram-three {
        left:
            50%;

        right:
            auto;

        bottom:
            5px;

        width:
            112px;

        min-width:
            112px;
    }

    .hologram-card > span {
        font-size:
            .85rem;
    }

    .hologram-card strong {
        font-size:
            .55rem;
    }

    .hologram-card small {
        font-size:
            .48rem;
    }

    .orbit-one {
        width:
            280px;

        height:
            130px;
    }

    .orbit-two {
        width:
            240px;

        height:
            110px;
    }

    .contact-box {
        padding:
            28px 18px;
    }

    .project-logo {
        height:
            175px;

        padding:
            20px;
    }

    .project-content {
        padding:
            0 22px 22px;
    }

    .footer-social {
        gap:
            20px;
    }

    .footer-social a {
        width:
            44px;

        height:
            44px;
    }

    .footer-social .social-facebook i {
        font-size:
            1.5rem;
    }

    .footer-social .social-instagram i,
    .footer-social .social-whatsapp i {
        font-size:
            2rem;
    }
}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .project,
    .project-logo img,
    .hero-buttons .button {
        transition:
            none;
    }
}

/* =====================================================
   ICONO MISIÓN / VISIÓN
===================================================== */

.about-icon {
    margin-bottom: 15px;
    font-size: 2rem;
}

.about-icon img {
    width: 55px;
    height: 55px;
    object-fit: contain;
    display: block;
    margin: 0;
}