/* ===================================
   SCRATLOOP DIGITAL
   MAIN STYLES
   SCRATTY FUTURISTIC IDENTITY
   RESPONSIVE / FLUID LAYOUT
=================================== */


/* =====================================================
   GLOBAL RESPONSIVE SYSTEM
===================================================== */

:root {

    --page-padding: clamp(16px, 4vw, 80px);

    --content-max: 1600px;

}


/* =====================================================
   GLOBAL RESET / OVERFLOW
===================================================== */

html,
body {

    width: 100%;
    max-width: 100%;

    overflow-x: hidden;

}


/* =====================================================
   RESPONSIVE MEDIA
===================================================== */

img,
video,
canvas,
svg {

    display: block;

    max-width: 100%;
    height: auto;

}


/* =====================================================
   TEXT SAFETY
===================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a {

    max-width: 100%;

    overflow-wrap: break-word;

}


/* =====================================================
   GLOBAL CONTAINER
===================================================== */

.container {

    width: min(
        var(--content-max),
        calc(100% - (var(--page-padding) * 2))
    );

    margin-left: auto;
    margin-right: auto;

    min-width: 0;

}


/* =====================================================
   GRID SAFETY
===================================================== */

.hero-content,
.service-container,
.ai-container,
.packages-grid,
.scratbot-content,
.portfolio-grid,
.mission-vision,
.values-grid {

    min-width: 0;

}


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

.hero {

    position: relative;

    width: 100%;
    min-width: 0;

    overflow: hidden;

    display: flex;

    align-items: center;

    min-height: calc(100vh - 95px);

    /*
        Espacio superior moderado.
        No usamos un valor exagerado porque
        Scratty también forma parte del Hero.
    */

    padding:
        55px 0 65px;

    background:
        radial-gradient(
            circle at 12% 30%,
            rgba(0, 200, 255, .12),
            transparent 34%
        ),

        radial-gradient(
            circle at 88% 50%,
            rgba(139, 61, 255, .16),
            transparent 36%
        ),

        var(--bg);

}


/* =====================================================
   HERO LIGHT
===================================================== */

.hero::before {

    content: "";

    position: absolute;

    width:
        clamp(
            350px,
            45vw,
            650px
        );

    height:
        clamp(
            350px,
            45vw,
            650px
        );

    top: -280px;
    left: 50%;

    border-radius: 50%;

    background: var(--primary);

    filter: blur(190px);

    opacity: .07;

    transform:
        translateX(-50%);

    pointer-events: none;

}


/* =====================================================
   HERO CONTENT
===================================================== */

.hero-content {

    width: min(
        var(--content-max),
        calc(100% - (var(--page-padding) * 2))
    );

    margin-left: auto;
    margin-right: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, .95fr);

    align-items: center;

    gap:
        clamp(
            40px,
            5vw,
            85px
        );

    min-width: 0;

}


/* =====================================================
   HERO TEXT
===================================================== */

.hero-text {

    width: 100%;

    min-width: 0;

    max-width: 760px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-self: center;

    margin: 0;

}


/* =====================================================
   HERO TITLE
===================================================== */

.hero-text h1 {

    width: 100%;

    max-width: 760px;

    margin:
        0 0 20px;

    /*
        Tamaño fluido.
        Evita que el título crezca demasiado
        en laptops de poca altura.
    */

    font-size:
        clamp(
            3rem,
            4.8vw,
            5.8rem
        );

    line-height: .98;

    letter-spacing: -.045em;

    overflow-wrap: break-word;

}


/* =====================================================
   HERO TITLE SPANS
===================================================== */

.hero-text h1 span {

    display: block;

}


/* =====================================================
   HERO DESCRIPTION
===================================================== */

.hero-text > p {

    width: 100%;

    max-width: 680px;

    margin:
        0 0 34px;

    font-size:
        clamp(
            1rem,
            1.2vw,
            1.12rem
        );

    line-height: 1.8;

    color: var(--text-muted);

}


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

.hero-buttons {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 15px;

}


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

.hero-scratty {

    position: relative;

    width: 100%;

    max-width: 650px;

    min-width: 0;

    /*
        Importante:

        La altura ya no crece demasiado
        en laptops pequeñas.

        Esto evita que el elemento fuerce
        una altura excesiva en el Hero.
    */

    min-height:
        clamp(
            360px,
            38vw,
            620px
        );

    display: flex;

    align-items: center;

    justify-content: center;

    align-self: center;

    margin-left: auto;
    margin-right: auto;

    overflow: hidden;

    isolation: isolate;

    transform: none;

}


/* =====================================================
   SCRATTY MEDIA
===================================================== */

.hero-scratty img,
.hero-scratty video,
.hero-scratty canvas,
.hero-scratty svg {

    display: block;

    width: 100%;

    max-width: 100%;

    height: auto;

    max-height: 100%;

    object-fit: contain;

    vertical-align: middle;

    min-width: 0;

    margin: auto;

}


/* =====================================================
   CANVAS
===================================================== */

.hero-scratty canvas {

    width: 100% !important;

    height: auto !important;

    max-width: 100% !important;

    max-height: 100% !important;

    display: block;

}


/* =====================================================
   SERVICES
===================================================== */

.services {

    width: 100%;

    background: var(--bg);

    text-align: center;

}


.services > .container > p {

    max-width: 760px;

    margin:
        20px auto 65px;

}


.service-container {

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 30px;

}


/* =====================================================
   AI SECTION
===================================================== */

.ai-section {

    width: 100%;

    background:
        linear-gradient(
            180deg,
            var(--surface),
            var(--bg)
        );

    text-align: center;

}


.ai-section > .container > p {

    max-width: 750px;

    margin:
        20px auto 60px;

}


.ai-container {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 30px;

}


.ai-container h3 {

    color: var(--accent);

}


/* =====================================================
   PACKAGES
===================================================== */

.packages {

    width: 100%;

    background: var(--bg);

    text-align: center;

}


.packages > .container > p {

    max-width: 780px;

    margin-left: auto;
    margin-right: auto;

}


.packages-grid {

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 25px;

    margin-top: 60px;

    align-items: stretch;

}


/* =====================================================
   SCRATBOT
===================================================== */

.scratbot {

    width: 100%;

    background:
        linear-gradient(
            180deg,
            var(--bg),
            var(--surface)
        );

}


.scratbot-content {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 60px;

    align-items: center;

    min-width: 0;

}


.scratbot-info {

    min-width: 0;

}


.scratbot-info ul {

    margin:
        30px 0;

    padding: 0;

    list-style: none;

}


.scratbot-info li {

    margin-bottom: 12px;

    color: var(--text-muted);

}


/* =====================================================
   PORTFOLIO
===================================================== */

.portfolio {

    width: 100%;

    text-align: center;

}


.portfolio > .container > p {

    max-width: 720px;

    margin:
        20px auto 60px;

}


.portfolio-grid {

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 520px)
        );

    justify-content: center;

    gap: 40px;

    margin:
        60px auto 0;

}


/* =====================================================
   ABOUT
===================================================== */

.about {

    width: 100%;

    background: var(--surface);

    text-align: center;

}


.about > .container > .section-description {

    max-width: 750px;

    margin:
        20px auto 60px;

}


.about-intro {

    max-width: 900px;

    margin:
        0 auto 60px;

}


.about-content h3 {

    margin-bottom: 20px;

}


.about-content p {

    color: var(--text-muted);

    line-height: 1.8;

}


/* =====================================================
   MISSION / VISION
===================================================== */

.mission-vision {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 30px;

    text-align: left;

}


.about-icon {

    margin-bottom: 15px;

    font-size: 2rem;

}


/* =====================================================
   VALUES
===================================================== */

.values {

    margin-top: 70px;

}


.values h3 {

    margin-bottom: 35px;

}


.values-grid {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 25px;

}


.value-item {

    text-align: center;

    border: none !important;

    box-shadow: none !important;

    min-width: 0;

}


.value-item > span {

    font-size: 2rem;

}


.value-item h4 {

    margin:
        12px 0 8px;

}


.value-item p {

    color: var(--text-muted);

    font-size: .9rem;

}


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

.contact {

    width: 100%;

    text-align: center;

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

}


.contact-box {

    max-width: 950px;

    margin: 0 auto;

}


.contact p {

    max-width: 650px;

    margin:
        25px auto 45px;

}


.contact-buttons {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 20px;

}


/* =====================================================
   GRADIENT TITLES
===================================================== */

.hero-text h1,
.services h2,
.ai-section h2,
.packages h2,
.portfolio h2,
.about h2,
.contact h2 {

    background-image:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #ffffff 15%,
            #bff7ff 22%,
            #00c8ff 30%,
            #00c8ff 35%,
            #9b6cff 45%,
            #8b3dff 50%,
            #ffffff 62%,
            #ffffff 70%,
            #bff7ff 77%,
            #00c8ff 84%,
            #8b3dff 94%,
            #ffffff 100%
        ) !important;

    -webkit-background-clip: text !important;

    background-clip: text !important;

    -webkit-text-fill-color: transparent !important;

    color: transparent !important;

    background-size: 100% 100% !important;

    background-repeat: no-repeat !important;

    background-color: transparent !important;

}


/* =====================================================
   GENERAL ENTRY ANIMATION
===================================================== */

@keyframes fadeUp {

    from {

        opacity: 0;

        transform:
            translateY(40px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


.hero-text > * {

    animation:
        fadeUp .8s ease both;

}


.hero-text h1 {

    animation-delay: .15s;

}


.hero-text > p {

    animation-delay: .25s;

}


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

@media (min-width: 1600px) {

    .hero {

        min-height:
            calc(100vh - 95px);

        padding:
            60px 0 70px;

    }


    .hero-content {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, .9fr);

        gap: 80px;

    }


    .hero-text h1 {

        font-size:
            clamp(
                4rem,
                4.4vw,
                6rem
            );

        max-width: 800px;

    }


    .hero-text > p {

        font-size: 1.18rem;

        max-width: 700px;

    }


    .hero-scratty {

        max-width: 680px;

        min-height:
            clamp(
                480px,
                40vw,
                650px
            );

    }


    .service-container,
    .packages-grid {

        gap: 32px;

    }

}


/* =====================================================
   DESKTOP / LAPTOP
   1400px — 1201px
===================================================== */

@media (max-width: 1400px) {

    .hero-content {

        gap:
            clamp(
                30px,
                4vw,
                60px
            );

    }


    .hero-text {

        max-width: 700px;

    }


    .hero-text h1 {

        font-size:
            clamp(
                3rem,
                4.5vw,
                5rem
            );

    }


    .hero-scratty {

        max-width: 580px;

        min-height:
            clamp(
                360px,
                39vw,
                560px
            );

    }

}


/* =====================================================
   LAPTOP — 1200px
===================================================== */

@media (max-width: 1200px) {

    /*
        Punto importante:

        Ya no intentamos mantener un Hero de dos
        columnas demasiado estrechas.

        Hasta 1200px reducimos el tamaño de ambos
        elementos y el espacio entre ellos.
    */

    .hero {

        min-height:
            calc(100vh - 95px);

        padding:
            55px 0 65px;

    }


    .hero-content {

        grid-template-columns:
            minmax(
                0,
                1fr
            )
            minmax(
                300px,
                .78fr
            );

        gap: 30px;

    }


    .hero-text {

        max-width: 650px;

    }


    .hero-text h1 {

        font-size:
            clamp(
                2.8rem,
                4.5vw,
                4.5rem
            );

    }


    .hero-text > p {

        max-width: 600px;

        font-size:
            clamp(
                .98rem,
                1.2vw,
                1.08rem
            );

    }


    .hero-scratty {

        max-width: 520px;

        min-height:
            clamp(
                350px,
                38vw,
                480px
            );

    }


    .packages-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }

}


/* =====================================================
   BREAKPOINT CRÍTICO
   1350px — 1101px

   Este rango evita específicamente el problema
   de resoluciones como:

   1318 x 800
   1233 x 800
   1108 x 800

   No esperamos hasta 1100px.

   El Hero pasa a una sola columna antes
   de que el texto y Scratty puedan invadirse.
===================================================== */

@media (max-width: 1350px) and (min-width: 1101px) {

    .hero {

        min-height: auto;

        /*
            Mantiene un espacio superior parecido
            al de tu página de cotización,
            pero sin exagerarlo.
        */

        padding:
            75px 0 85px;

    }


    .hero-content {

        width: min(
            1000px,
            calc(
                100% -
                (var(--page-padding) * 2)
            )
        );

        grid-template-columns: 1fr;

        gap: 45px;

        text-align: center;

    }


    .hero-text {

        width: 100%;

        max-width: 850px;

        margin-left: auto;
        margin-right: auto;

        align-items: center;

    }


    .hero-text h1 {

        width: 100%;

        max-width: 850px;

        margin-left: auto;
        margin-right: auto;

        font-size:
            clamp(
                3.2rem,
                5vw,
                4.8rem
            );

    }


    .hero-text > p {

        max-width: 720px;

        margin-left: auto;
        margin-right: auto;

    }


    .hero-buttons {

        justify-content: center;

    }


    .hero-scratty {

        width:
            min(
                100%,
                600px
            );

        max-width: 600px;

        min-height:
            clamp(
                360px,
                48vw,
                500px
            );

        margin-left: auto;
        margin-right: auto;

    }

}


/* =====================================================
   TABLET — 1100px
===================================================== */

@media (max-width: 1100px) {

    .hero {

        min-height: auto;

        /*
            Más espacio superior como la página
            de cotización.
        */

        padding:
            85px 0 80px;

    }


    .hero-content {

        width:
            min(
                900px,
                calc(
                    100% -
                    (var(--page-padding) * 2)
                )
            );

        grid-template-columns: 1fr;

        gap: 45px;

        text-align: center;

    }


    .hero-text {

        width: 100%;

        max-width: 820px;

        margin-left: auto;
        margin-right: auto;

        align-items: center;

    }


    .hero-text h1 {

        width: 100%;

        max-width: 800px;

        margin-left: auto;
        margin-right: auto;

    }


    .hero-text > p {

        max-width: 700px;

        margin-left: auto;
        margin-right: auto;

    }


    .hero-buttons {

        justify-content: center;

    }


    .hero-scratty {

        width:
            min(
                100%,
                600px
            );

        max-width: 600px;

        min-height:
            clamp(
                360px,
                60vw,
                520px
            );

        margin-left: auto;
        margin-right: auto;

        grid-column: 1;

    }


    .service-container {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }


    .ai-container {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }


    .values-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }

}


/* =====================================================
   900px
===================================================== */

@media (max-width: 900px) {

    .portfolio-grid {

        grid-template-columns:
            minmax(0, 520px);

        max-width: 520px;

        margin-left: auto;
        margin-right: auto;

    }


    .scratbot-content {

        grid-template-columns: 1fr;

        gap: 45px;

    }


    .mission-vision {

        grid-template-columns: 1fr;

    }

}


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

@media (max-width: 768px) {

    .hero {

        min-height: auto;

        /*
            Espacio superior claramente visible
            entre header y contenido.
        */

        padding:
            105px 0 65px;

    }


    .hero-content {

        width:
            calc(
                100% - 32px
            );

        gap: 40px;

    }


    .hero-text {

        width: 100%;

        max-width: 100%;

    }


    .hero-text h1 {

        width: 100%;

        font-size:
            clamp(
                2.5rem,
                9vw,
                3.5rem
            );

        line-height: 1.02;

        letter-spacing: -.035em;

        margin-bottom: 18px;

    }


    .hero-text > p {

        width: 100%;

        font-size: 1rem;

        line-height: 1.7;

        margin-bottom: 28px;

    }


    .hero-scratty {

        width:
            min(
                100%,
                520px
            );

        max-width: 520px;

        min-height:
            clamp(
                300px,
                75vw,
                420px
            );

        margin-left: auto;
        margin-right: auto;

    }


    .service-container,
    .ai-container,
    .packages-grid {

        grid-template-columns: 1fr;

    }


    .contact-buttons {

        flex-direction: column;

        align-items: center;

    }


    .contact-buttons .button {

        width: 100%;

        max-width: 320px;

    }

}


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

@media (max-width: 500px) {

    .hero {

        /*
            Mantiene el mismo concepto de la página
            de cotización, pero adaptado al Hero.
        */

        padding:
            95px 0 50px;

    }


    .hero-content {

        width:
            calc(
                100% - 24px
            );

        gap: 32px;

    }


    .hero-text h1 {

        font-size:
            clamp(
                2.2rem,
                11vw,
                3rem
            );

        line-height: 1.04;

        letter-spacing: -.025em;

        margin-bottom: 16px;

    }


    .hero-text > p {

        font-size: .95rem;

        line-height: 1.65;

        margin-bottom: 24px;

    }


    .hero-scratty {

        width: 100%;

        max-width: 400px;

        min-height:
            clamp(
                270px,
                80vw,
                360px
            );

    }


    .values-grid {

        grid-template-columns: 1fr;

    }

}


/* =====================================================
   VERY SMALL MOBILE — 360px
===================================================== */

@media (max-width: 360px) {

    .hero {

        padding:
            90px 0 45px;

    }


    .hero-content {

        width:
            calc(
                100% - 20px
            );

        gap: 28px;

    }


    .hero-text h1 {

        font-size: 2.15rem;

    }


    .hero-text > p {

        font-size: .9rem;

    }


    .hero-scratty {

        max-width: 330px;

        min-height: 270px;

    }

}


/* =====================================================
   EXTRA SAFETY
===================================================== */

@media (max-width: 1350px) {

    .hero-text,
    .hero-scratty {

        min-width: 0;

    }


    .hero-text h1,
    .hero-text > p {

        overflow-wrap: anywhere;

    }

}


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

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

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            .01ms !important;

    }

}


/* =====================================================
   HERO TITLE — AJUSTE DE POSICIÓN
   Sube únicamente el bloque de texto hacia el header
===================================================== */

@media (min-width: 1101px) {

    .hero-text {
        transform: translateY(-35px);
    }

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1100px) and (min-width: 769px) {

    .hero-text {
        transform: translateY(-30px);
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {

    .hero-text {
        transform: translateY(-20px);
    }

}


/* =====================================================
   MOBILE PEQUEÑO
===================================================== */

@media (max-width: 500px) {

    .hero-text {
        transform: translateY(-15px);
    }

}