/* =========================================================
   RANDM TORNADO — SPANISH HOMEPAGE V1
========================================================= */

.rtes-home,
.rtes-home *{
    box-sizing:border-box;
}

.rtes-home{
    --ink:#17151c;
    --muted:#706c76;
    --line:#e7e2eb;
    --soft:#f7f4f9;
    --purple:#813bd3;
    --purple2:#aa46e6;
    --dark:#100e14;

    width:100%;

    color:var(--ink);
    background:#fff;
}

.rtes-shell{
    width:min(
        1180px,
        calc(100% - 40px)
    );

    margin:0 auto;
}


/* HERO */

.rtes-hero{
    position:relative;

    overflow:hidden;

    padding:
        78px 0 76px;

    background:
        linear-gradient(
            135deg,
            #faf8fc 0%,
            #ffffff 52%,
            #f5effb 100%
        );
}

.rtes-hero-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(5px);

    pointer-events:none;
}

.rtes-hero-glow--one{
    width:460px;
    height:460px;

    right:-170px;
    top:-190px;

    background:
        rgba(132,61,210,.12);
}

.rtes-hero-glow--two{
    width:330px;
    height:330px;

    left:-170px;
    bottom:-180px;

    background:
        rgba(90,111,238,.08);
}

.rtes-hero-grid{
    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
        minmax(0,1.06fr)
        minmax(360px,.94fr);

    align-items:center;

    gap:70px;
}

.rtes-eyebrow,
.rtes-kicker{
    display:inline-flex;

    color:#7540ad;

    font-size:10px;
    font-weight:900;

    letter-spacing:.14em;

    text-transform:uppercase;
}

.rtes-eyebrow{
    margin-bottom:17px;
}

.rtes-hero h1{
    max-width:700px;

    margin:0 0 20px;

    font-size:
        clamp(
            52px,
            6vw,
            82px
        );

    line-height:.94;

    letter-spacing:-.065em;
}

.rtes-hero h1 span{
    display:block;

    color:#7c3bc4;
}

.rtes-hero-lead{
    max-width:650px;

    margin:0 0 27px;

    color:#65616a;

    font-size:17px;
    line-height:1.7;
}

.rtes-actions{
    display:flex;

    flex-wrap:wrap;

    gap:9px;
}

.rtes-btn{
    min-height:50px;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:10px;

    padding:0 19px;

    border-radius:12px;

    font-size:12px;
    font-weight:850;

    text-decoration:none !important;
}

.rtes-btn--primary{
    color:#fff !important;

    background:
        linear-gradient(
            135deg,
            #7430ca,
            #a23de0 55%,
            #6576ee
        );

    box-shadow:
        0 15px 30px
        rgba(111,46,189,.17);
}

.rtes-btn--secondary{
    color:#26232a !important;

    border:1px solid #ddd7e3;

    background:#fff;
}

.rtes-hero-points{
    display:flex;

    flex-wrap:wrap;

    gap:26px;

    margin-top:31px;
}

.rtes-hero-points div{
    display:flex;

    flex-direction:column;

    gap:2px;
}

.rtes-hero-points strong{
    font-size:13px;
}

.rtes-hero-points span{
    color:#817c85;

    font-size:9px;
}


/* VISUAL */

.rtes-visual{
    position:relative;

    min-height:440px;

    display:flex;

    align-items:center;
    justify-content:center;
}

.rtes-visual-main{
    position:relative;

    z-index:3;

    width:290px;
    height:290px;

    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    padding:30px;

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

    border-radius:50%;

    text-align:center;

    color:#fff;

    background:
        radial-gradient(
            circle at 30% 25%,
            #9b48db,
            #56237b 48%,
            #17121e 100%
        );

    box-shadow:
        0 30px 70px
        rgba(55,30,74,.22);
}

.rtes-visual-main small{
    margin-bottom:12px;

    color:#d8c5e5;

    font-size:8px;
    font-weight:900;

    letter-spacing:.14em;
}

.rtes-visual-main strong{
    font-size:31px;

    letter-spacing:-.04em;
}

.rtes-visual-main span{
    margin-top:9px;

    color:#d6cddc;

    font-size:10px;
}

.rtes-orbit{
    position:absolute;

    border:
        1px solid
        rgba(124,59,196,.15);

    border-radius:50%;
}

.rtes-orbit--one{
    width:365px;
    height:365px;
}

.rtes-orbit--two{
    width:430px;
    height:430px;
}

.rtes-float{
    position:absolute;

    z-index:4;

    min-width:72px;

    padding:
        12px 14px;

    border:
        1px solid #e2dbe7;

    border-radius:12px;

    text-align:center;

    color:#6e35a8;

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

    box-shadow:
        0 12px 30px
        rgba(48,30,62,.09);

    font-size:12px;
    font-weight:900;
}

.rtes-float--one{
    left:7%;
    top:21%;
}

.rtes-float--two{
    right:1%;
    top:43%;
}

.rtes-float--three{
    left:12%;
    bottom:14%;
}


/* SECTIONS */

.rtes-section{
    padding:78px 0;
}

.rtes-section--soft{
    background:#faf8fb;
}

.rtes-section-head{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(320px,.65fr);

    align-items:end;

    gap:45px;

    margin-bottom:30px;
}

.rtes-section-head h2,
.rtes-about-grid h2,
.rtes-faq-title{
    max-width:800px;

    margin:
        10px 0 0;

    font-size:
        clamp(
            35px,
            4vw,
            48px
        );

    line-height:1.04;

    letter-spacing:-.05em;
}

.rtes-section-head > p{
    margin:0;

    color:var(--muted);

    font-size:13px;
    line-height:1.7;
}


/* MODELS */

.rtes-model-grid{
    display:grid;

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

    gap:9px;
}

.rtes-model-card{
    min-height:260px;

    display:flex;

    flex-direction:column;

    padding:20px;

    border:
        1px solid var(--line);

    border-radius:17px;

    background:
        linear-gradient(
            145deg,
            #fff,
            #faf9fb
        );
}

.rtes-model-card--accent{
    background:
        linear-gradient(
            145deg,
            #fbf7ff,
            #f5eefb
        );
}

.rtes-model-number{
    display:block;

    margin-bottom:28px;

    color:#7f3dbd;

    font-size:32px;
    font-weight:900;

    letter-spacing:-.05em;
}

.rtes-model-card small{
    color:#8b8390;

    font-size:7px;
    font-weight:900;

    letter-spacing:.1em;
}

.rtes-model-card h3{
    margin:8px 0 8px;

    font-size:17px;

    line-height:1.15;
}

.rtes-model-card p{
    margin:0;

    color:#77727b;

    font-size:10px;
    line-height:1.55;
}

.rtes-model-card a{
    margin-top:auto;

    padding-top:22px;

    color:#773bb0;

    font-size:10px;
    font-weight:850;

    text-decoration:none !important;
}


/* ABOUT */

.rtes-about-grid{
    display:grid;

    grid-template-columns:
        minmax(0,.8fr)
        minmax(0,1.2fr);

    gap:70px;
}

.rtes-prose p{
    max-width:720px;

    margin:0 0 16px;

    color:#65616a;

    font-size:13px;
    line-height:1.8;
}


/* INFO */

.rtes-info-grid{
    display:grid;

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

    gap:10px;

    margin-top:27px;
}

.rtes-info-grid article{
    min-height:180px;

    padding:22px;

    border:
        1px solid var(--line);

    border-radius:16px;
}

.rtes-info-grid article > span{
    color:#8242ba;

    font-size:10px;
    font-weight:900;
}

.rtes-info-grid h3{
    margin:
        22px 0 8px;

    font-size:19px;
}

.rtes-info-grid p{
    margin:0;

    color:#77727b;

    font-size:11px;
    line-height:1.6;
}


/* CTA */

.rtes-shop-cta{
    display:grid;

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

    align-items:center;

    gap:30px;

    padding:42px;

    overflow:hidden;

    border-radius:24px;

    color:#fff;

    background:
        radial-gradient(
            circle at 85% 10%,
            #542b74,
            transparent 38%
        ),
        #110e15;
}

.rtes-shop-cta span{
    color:#c9b8d4;

    font-size:8px;
    font-weight:900;

    letter-spacing:.13em;
}

.rtes-shop-cta h2{
    margin:
        9px 0 8px;

    color:#fff;

    font-size:35px;

    letter-spacing:-.04em;
}

.rtes-shop-cta p{
    margin:0;

    color:#bdb7c3;

    font-size:11px;
}

.rtes-btn--light{
    color:#241d28 !important;

    background:#fff;
}


/* FAQ */

.rtes-faq{
    margin-top:25px;

    border-top:
        1px solid var(--line);
}

.rtes-faq details{
    border-bottom:
        1px solid var(--line);
}

.rtes-faq summary{
    position:relative;

    padding:
        18px 35px 18px 0;

    cursor:pointer;

    list-style:none;

    font-size:12px;
    font-weight:850;
}

.rtes-faq summary::-webkit-details-marker{
    display:none;
}

.rtes-faq summary::after{
    content:"+";

    position:absolute;

    right:4px;
    top:13px;

    color:#7b3db5;

    font-size:20px;
}

.rtes-faq details[open]
summary::after{
    content:"−";
}

.rtes-faq p{
    max-width:780px;

    margin:
        0 0 17px;

    color:#716c75;

    font-size:11px;
    line-height:1.7;
}


/* MOBILE */

@media(max-width:767px){

    .rtes-shell{
        width:
            calc(100% - 24px);
    }

    .rtes-hero{
        padding:
            38px 0 41px;
    }

    .rtes-hero-grid{
        grid-template-columns:1fr;

        gap:23px;
    }

    .rtes-hero h1{
        font-size:43px;
    }

    .rtes-hero-lead{
        font-size:13px;
    }

    .rtes-actions{
        display:grid;

        grid-template-columns:
            1fr 1fr;
    }

    .rtes-btn{
        min-height:45px;

        padding:0 10px;

        font-size:9px;
    }

    .rtes-hero-points{
        display:grid;

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

        gap:10px;

        margin-top:22px;
    }

    .rtes-hero-points span{
        font-size:8px;
    }

    .rtes-visual{
        min-height:300px;
    }

    .rtes-visual-main{
        width:210px;
        height:210px;
    }

    .rtes-visual-main strong{
        font-size:23px;
    }

    .rtes-orbit--one{
        width:255px;
        height:255px;
    }

    .rtes-orbit--two{
        width:290px;
        height:290px;
    }

    .rtes-float{
        min-width:57px;

        padding:9px;

        font-size:9px;
    }

    .rtes-section{
        padding:47px 0;
    }

    .rtes-section-head{
        grid-template-columns:1fr;

        gap:10px;

        margin-bottom:20px;
    }

    .rtes-section-head h2,
    .rtes-about-grid h2,
    .rtes-faq-title{
        font-size:29px;
    }

    .rtes-section-head > p{
        font-size:11px;
    }

    .rtes-model-grid{
        display:flex;

        gap:7px;

        overflow-x:auto;

        scroll-snap-type:x mandatory;

        padding-bottom:6px;

        scrollbar-width:none;
    }

    .rtes-model-grid::-webkit-scrollbar{
        display:none;
    }

    .rtes-model-card{
        flex:
            0 0 71%;

        min-height:235px;

        padding:16px;

        scroll-snap-align:start;
    }

    .rtes-model-number{
        margin-bottom:22px;

        font-size:28px;
    }

    .rtes-about-grid{
        grid-template-columns:1fr;

        gap:18px;
    }

    .rtes-prose p{
        font-size:11.5px;
    }

    .rtes-info-grid{
        grid-template-columns:1fr;

        gap:7px;
    }

    .rtes-info-grid article{
        min-height:145px;

        padding:17px;
    }

    .rtes-shop-cta{
        grid-template-columns:1fr;

        gap:20px;

        padding:24px 18px;

        border-radius:18px;
    }

    .rtes-shop-cta h2{
        font-size:28px;
    }

}