/* =========================================================
   AR DETALLES
   RESPONSIVE GLOBAL
   ========================================================= */

@media (max-width: 900px) {

    .hero {
        padding-left: 30px;
        padding-right: 30px;
    }

    .hero-content {
        width: 100%;
        max-width: 760px;
    }

    .hero-description {
        max-width: 590px;
    }

}


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

@media (max-width: 768px) {

    .hero {
        min-height: calc(100vh - 72px);

        padding:
            60px 20px 80px;
    }

    .hero-content {
        max-width: 650px;
    }

    .hero-badge {
        margin-bottom: 20px;
    }

    .hero-description {
        margin-bottom: 35px;
    }

    .hero-ring {
        opacity: .11;
    }

    .ring-one {
        width: 400px;
        height: 400px;
    }

    .ring-two {
        width: 560px;
        height: 560px;
    }

    .ring-three {
        width: 720px;
        height: 720px;
    }

    .floating-symbol {
        opacity: .55;
    }

}


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

@media (max-width: 600px) {

    body {
        min-width: 320px;
    }

    .scene {
        min-height: 100svh;
    }

    .hero {
        min-height: calc(100svh - 72px);

        padding:
            45px 16px 65px;
    }

    .hero-content {
        width: 100%;
    }

    .hero-badge {
        max-width: 100%;

        font-size: .55rem;

        letter-spacing: 1.5px;

        white-space: nowrap;
    }

    .badge-line {
        width: 22px;
    }

    .hero-subtitle {
        margin-bottom: 12px;

        font-size: .88rem;

        letter-spacing: 1px;
    }

    .hero-description {
        max-width: 430px;

        margin:
            22px auto 30px;

        font-size: .86rem;

        line-height: 1.75;
    }

    .hero-buttons {
        width: 100%;
    }

    .main-button {
        width: min(100%, 340px);
    }

    .hero-scroll-indicator {
        margin-top: 28px;
    }

    .hero-decoration {
        display: none;
    }

    .floating-symbol {
        font-size: .75rem;

        opacity: .4;
    }

    .symbol-one {
        top: 18%;
        left: 8%;
    }

    .symbol-two {
        top: 22%;
        right: 8%;
    }

    .symbol-three {
        bottom: 18%;
        left: 7%;
    }

    .symbol-four {
        bottom: 15%;
        right: 8%;
    }

    .ring-one {
        width: 300px;
        height: 300px;
    }

    .ring-two {
        width: 440px;
        height: 440px;
    }

    .ring-three {
        width: 580px;
        height: 580px;
    }

}


/* =========================================================
   MÓVILES PEQUEÑOS
   ========================================================= */

@media (max-width: 430px) {

    .hero {
        padding:
            38px 14px 55px;
    }

    .hero-badge {
        gap: 5px;

        font-size: .5rem;

        letter-spacing: 1.1px;
    }

    .badge-line {
        width: 17px;
    }

    .hero-subtitle {
        font-size: .82rem;
    }

    .hero-description {
        font-size: .82rem;

        line-height: 1.7;
    }

    .main-button {
        width: 100%;

        min-height: 68px;
    }

    .button-content small {
        font-size: .6rem;
    }

}


/* =========================================================
   PANTALLAS MUY PEQUEÑAS
   ========================================================= */

@media (max-width: 360px) {

    .hero {
        padding:
            32px 12px 48px;
    }

    .hero-badge {
        font-size: .46rem;

        letter-spacing: .8px;
    }

    .hero-subtitle {
        font-size: .76rem;
    }

    .hero-description {
        font-size: .78rem;
    }

    .main-button {
        min-height: 64px;

        padding:
            10px 12px;
    }

    .button-icon {
        width: 38px;
        height: 38px;

        font-size: 1rem;
    }

    .button-arrow {
        width: 25px;
        height: 25px;

        font-size: 1rem;
    }

}


/* =========================================================
   PANTALLAS ALTAS
   ========================================================= */

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

    .hero {
        padding-top: 100px;
        padding-bottom: 120px;
    }

    .hero-description {
        margin-bottom: 48px;
    }

}


/* =========================================================
   PANTALLAS MUY ANCHAS
   ========================================================= */

@media (min-width: 1400px) {

    .hero-content {
        max-width: 1000px;
    }

    .hero-description {
        max-width: 700px;
    }

    .hero-ring {
        opacity: .22;
    }

}


/* =========================================================
   TÁCTIL
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    .main-button:hover {
        transform: none;

        box-shadow:
            0 15px 45px rgba(0, 0, 0, .35),
            inset 0 0 25px rgba(212, 175, 106, .025);
    }

    .main-button:active {
        transform:
            scale(.96);
    }

    .brand:hover {
        transform: none;
    }

    .cursor-light {
        display: none;
    }

}


/* =========================================================
   MOUSE / PANTALLAS GRANDES
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .main-button {
        will-change:
            transform;
    }

    .brand {
        will-change:
            transform;
    }

}


/* =========================================================
   REDUCIR MOVIMIENTO
   ========================================================= */

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-delay: 0ms !important;
        transition-duration: .01ms !important;
    }

}