/* ============================================================
   DRAGOINFINY
   INDEX.CSS

   Portada principal
============================================================ */


/* ============================================================
   PALETA OFICIAL
============================================================ */

:root {

    --fondo-principal: #1A1F33;
    --fondo-secundario: #2E324A;

    --gris-azulado: #4D4F63;
    --gris-oliva: #686259;

    --dorado: #A19A57;

    --blanco: #FFFFFF;

    --texto-secundario: #C5C6CE;

    --borde:
        rgba(255, 255, 255, 0.10);

    --borde-dorado:
        rgba(161, 154, 87, 0.32);

}


/* ============================================================
   RESET
============================================================ */

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

    box-sizing: border-box;

}


html {

    width: 100%;

    min-height: 100%;

    margin: 0;

    padding: 0;

    overflow-x: hidden;

}


body {

    width: 100%;

    min-width: 0;

    min-height: 100vh;

    margin: 0;

    padding: 0;

    overflow-x: hidden;

    color: var(--blanco);

    background:
        var(--fondo-principal);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;

}


img,
svg,
canvas {

    display: block;

    max-width: 100%;

}


a {

    color: inherit;

    text-decoration: none;

}


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

#neuralCanvas {

    position: fixed;

    z-index: 0;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

}


/* ============================================================
   LUCES DEL FONDO
============================================================ */

.background-glow {

    position: fixed;

    z-index: 0;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(10px);

}


.background-glow-one {

    top: -180px;

    left: -190px;

    width: 520px;

    height: 520px;

    background:
        radial-gradient(
            circle,
            rgba(161, 154, 87, 0.11),
            transparent 68%
        );

}


.background-glow-two {

    right: -220px;

    bottom: -230px;

    width: 600px;

    height: 600px;

    background:
        radial-gradient(
            circle,
            rgba(77, 79, 99, 0.28),
            transparent 68%
        );

}


/* ============================================================
   ESTRUCTURA GENERAL
============================================================ */

.landing {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    width: 100%;

    min-height: 100svh;

}


/* ============================================================
   HEADER
============================================================ */

.landing-header {

    position: absolute;

    z-index: 10;

    top: 0;

    left: 0;

    display: flex;

    align-items: center;

    width: 100%;

    padding:
        25px
        clamp(22px, 5vw, 80px);

}


.top-brand {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    min-width: 0;

}


.top-brand img {

    width: 43px;

    height: 43px;

    flex: 0 0 43px;

    object-fit: contain;

}


.top-brand > div {

    min-width: 0;

    line-height: 1.08;

}


.top-brand strong {

    display: block;

    color: var(--blanco);

    font-size: 1rem;

    font-weight: 850;

    letter-spacing: -0.02em;

}


.top-brand span {

    display: block;

    margin-top: 4px;

    color: #A8A9B2;

    font-size: 0.58rem;

    font-weight: 700;

    letter-spacing: 0.13em;

    text-transform: uppercase;

}


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

.hero {

    position: relative;

    display: grid;

    place-items: center;

    width: 100%;

    min-height: 100svh;

    padding:
        125px
        24px
        75px;

    overflow: hidden;

}


.hero-content {

    position: relative;

    z-index: 4;

    width: min(100%, 1150px);

    min-width: 0;

    margin-inline: auto;

    text-align: center;

}


/* ============================================================
   LOGO CENTRAL
============================================================ */

.hero-brand {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    margin-bottom: 27px;

}


.hero-logo {

    display: grid;

    place-items: center;

    width: 54px;

    height: 54px;

    padding: 7px;

    border:
        1px solid
        var(--borde-dorado);

    border-radius: 16px;

    background:
        rgba(46, 50, 74, 0.55);

    box-shadow:
        0 15px 45px
        rgba(0, 0, 0, 0.20);

    backdrop-filter:
        blur(10px);

}


.hero-logo img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}


.hero-brand > span {

    color: var(--blanco);

    font-size:
        clamp(
            1.15rem,
            2vw,
            1.5rem
        );

    font-weight: 800;

    letter-spacing: -0.025em;

}


/* ============================================================
   ETIQUETA
============================================================ */

.hero-tag {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    width: fit-content;

    max-width: 100%;

    margin:
        0 auto
        25px;

    padding:
        8px 14px;

    border:
        1px solid
        var(--borde-dorado);

    border-radius: 100px;

    color: #D1CD9C;

    background:
        rgba(161, 154, 87, 0.07);

    font-size: 0.72rem;

    font-weight: 750;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}


.hero-tag-dot {

    width: 7px;

    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background:
        var(--dorado);

    box-shadow:
        0 0
        14px
        rgba(161, 154, 87, 0.8);

}


/* ============================================================
   TITULAR
============================================================ */

.hero h1 {

    max-width: 1200px;

    margin:
        0 auto;

    color: var(--blanco);

    font-size:
        clamp(
            3.35rem,
            7.3vw,
            7.4rem
        );

    font-weight: 650;

    line-height: 0.94;

    letter-spacing: -0.073em;

    text-wrap: balance;

}


.hero h1 span {

    display: block;

    color: var(--dorado);

}


/* ============================================================
   DESCRIPCIÓN
============================================================ */

.hero-description {

    max-width: 720px;

    margin:
        29px auto
        0;

    color:
        var(--texto-secundario);

    font-size:
        clamp(
            0.98rem,
            1.5vw,
            1.13rem
        );

    line-height: 1.7;

    text-wrap: balance;

}


/* ============================================================
   BOTONES
============================================================ */

.hero-actions {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 37px;

}


.button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 58px;

    padding:
        0 25px;

    border:
        1px solid
        transparent;

    border-radius: 100px;

    font-size: 0.93rem;

    font-weight: 780;

    white-space: nowrap;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        background-color 0.22s ease,
        border-color 0.22s ease;

}


.button svg {

    width: 20px;

    height: 20px;

    flex: 0 0 20px;

    fill: currentColor;

}


.button-primary {

    color:
        var(--fondo-principal);

    background:
        var(--dorado);

    box-shadow:
        0 15px 42px
        rgba(161, 154, 87, 0.20);

}


.button-primary:hover {

    transform:
        translateY(-3px);

    background:
        #B8B16D;

    box-shadow:
        0 20px 48px
        rgba(161, 154, 87, 0.28);

}


.button-secondary {

    color:
        var(--blanco);

    border-color:
        rgba(255, 255, 255, 0.13);

    background:
        rgba(46, 50, 74, 0.60);

    backdrop-filter:
        blur(12px);

}


.button-secondary:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(161, 154, 87, 0.34);

    background:
        rgba(77, 79, 99, 0.62);

}


.button-arrow {

    display: inline-block;

    transition:
        transform
        0.2s ease;

}


.button-secondary:hover
.button-arrow {

    transform:
        translateX(4px);

}


/* ============================================================
   TEXTO INFERIOR
============================================================ */

.hero-footer-text {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    margin-top: 50px;

    color: #898B97;

    font-size: 0.69rem;

    font-weight: 650;

    letter-spacing: 0.11em;

    text-transform: uppercase;

}


.hero-footer-text span {

    width: 30px;

    height: 1px;

    background:
        rgba(161, 154, 87, 0.42);

}


/* ============================================================
   EFECTO SUPERIOR DE LUZ
============================================================ */

.hero::before {

    content: "";

    position: absolute;

    z-index: 1;

    top: -310px;

    left: 50%;

    width: min(1100px, 95vw);

    height: 620px;

    border-radius: 50%;

    pointer-events: none;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(161, 154, 87, 0.07),
            transparent 68%
        );

}


/* ============================================================
   TABLETS
============================================================ */

@media
(max-width: 900px) {

    .landing-header {

        padding:
            20px
            25px;

    }


    .hero {

        padding:
            120px
            24px
            60px;

    }


    .hero h1 {

        font-size:
            clamp(
                3.2rem,
                10vw,
                5.7rem
            );

    }

}


/* ============================================================
   MÓVILES
============================================================ */

@media
(max-width: 600px) {

    .landing-header {

        padding:
            17px
            18px;

    }


    .top-brand {

        gap: 9px;

    }


    .top-brand img {

        width: 39px;

        height: 39px;

        flex-basis: 39px;

    }


    .top-brand strong {

        font-size: 0.9rem;

    }


    .top-brand span {

        display: none;

    }


    .hero {

        min-height: 100svh;

        padding:
            100px
            16px
            42px;

    }


    .hero-brand {

        gap: 9px;

        margin-bottom: 20px;

    }


    .hero-logo {

        width: 46px;

        height: 46px;

        border-radius: 14px;

    }


    .hero-brand > span {

        font-size: 1.05rem;

    }


    .hero-tag {

        margin-bottom: 20px;

        padding:
            7px
            11px;

        font-size: 0.6rem;

        letter-spacing: 0.05em;

    }


    .hero h1 {

        font-size:
            clamp(
                2.85rem,
                14vw,
                4.4rem
            );

        line-height: 0.98;

        letter-spacing: -0.062em;

    }


    .hero-description {

        max-width: 500px;

        margin-top: 23px;

        padding-inline: 4px;

        font-size: 0.91rem;

        line-height: 1.65;

    }


    .hero-actions {

        display: grid;

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

        gap: 11px;

        width: 100%;

        max-width: 400px;

        margin:
            30px auto
            0;

    }


    .button {

        width: 100%;

        min-height: 54px;

        padding:
            0 17px;

        font-size: 0.88rem;

    }


    .hero-footer-text {

        gap: 8px;

        margin-top: 36px;

        padding-inline: 10px;

        font-size: 0.56rem;

        line-height: 1.5;

        letter-spacing: 0.07em;

    }


    .hero-footer-text span {

        width: 17px;

        flex: 0 0 17px;

    }

}


/* ============================================================
   TELÉFONOS PEQUEÑOS
============================================================ */

@media
(max-width: 370px) {

    .hero h1 {

        font-size: 2.65rem;

    }


    .hero-description {

        font-size: 0.86rem;

    }


    .hero-tag {

        font-size: 0.55rem;

    }


    .hero-footer-text span {

        display: none;

    }

}


/* ============================================================
   PANTALLAS BAJAS
============================================================ */

@media
(max-height: 720px)
and
(min-width: 601px) {

    .hero {

        padding-top: 100px;

        padding-bottom: 35px;

    }


    .hero-brand {

        margin-bottom: 17px;

    }


    .hero-tag {

        margin-bottom: 17px;

    }


    .hero-description {

        margin-top: 20px;

    }


    .hero-actions {

        margin-top: 27px;

    }


    .hero-footer-text {

        margin-top: 30px;

    }

}


/* ============================================================
   ACCESIBILIDAD
============================================================ */

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

    * {

        scroll-behavior: auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

    }

}