/* ==========================================================
   ZYNDHUX SHOP
   CORE STYLESHEET
========================================================== */

/* ==========================================================
   GOOGLE FONTS
========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ==========================================================
   CSS MODULES
========================================================== */

@import url('header.css');
@import url('footer.css');
@import url('home.css');
@import url('modal.css');

/* ==========================================================
   ROOT VARIABLES
========================================================== */

:root {

    /* Brand */

    --primary: #11dff7;
    --primary-hover: #0fc7dd;

    /* Backgrounds */

    --bg: #050812;
    --bg-secondary: #0c1220;
    --bg-card: #111827;
    --bg-hover: #171f30;

    /* Text */

    --text: #ffffff;
    --text-muted: #9ca3af;

    /* Borders */

    --border: rgba(255,255,255,.08);
    --border-active: rgba(17,223,247,.25);

    /* Radius */

    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 24px;

    /* Shadows */

    --shadow-sm:
        0 4px 12px rgba(0,0,0,.20);

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

    --shadow-lg:
        0 20px 50px rgba(0,0,0,.35);

    /* Container */

    --container:
        1400px;

    /* Animation */

    --transition:
        all .25s ease;

}

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

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

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    font-family: 'Inter', sans-serif;

    background: var(--bg);

    color: var(--text);

    min-height: 100vh;

    overflow-x: hidden;

    line-height: 1.6;

}

/* ==========================================================
   SELECTION
========================================================== */

::selection {

    background: var(--primary);

    color: #000;

}

/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar {

    width: 10px;

}

::-webkit-scrollbar-track {

    background: #080d18;

}

::-webkit-scrollbar-thumb {

    background: #1f2937;

    border-radius: 100px;

}

::-webkit-scrollbar-thumb:hover {

    background: var(--primary);

}

/* ==========================================================
   IMAGES
========================================================== */

img {

    display: block;

    max-width: 100%;

}

/* ==========================================================
   LINKS
========================================================== */

a {

    text-decoration: none;

    color: inherit;

}

/* ==========================================================
   LISTS
========================================================== */

ul,
ol {

    list-style: none;

}

/* ==========================================================
   INPUTS
========================================================== */

input,
textarea,
select,
button {

    font-family: inherit;

}

input,
textarea,
select {

    outline: none;

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

    background: var(--bg-card);

    color: var(--text);

}

input:focus,
textarea:focus,
select:focus {

    border-color: var(--primary);

}

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

button {

    cursor: pointer;

}

.btn {

    display: inline-flex;

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

    gap: 10px;

    min-height: 50px;

    padding: 0 24px;

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

    border: none;

    transition: var(--transition);

}

.btn-primary {

    background: var(--primary);

    color: #000;

    font-weight: 700;

}

.btn-primary:hover {

    background: var(--primary-hover);

    transform: translateY(-2px);

}

.btn-secondary {

    background: transparent;

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

    color: white;

}

.btn-secondary:hover {

    border-color: var(--primary);

}

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

.container {

    width: 100%;

    max-width: var(--container);

    margin: auto;

    padding-left: 20px;
    padding-right: 20px;

}

/* ==========================================================
   SECTIONS
========================================================== */

.section {

    padding: 100px 0;

}

.section-sm {

    padding: 60px 0;

}

.section-lg {

    padding: 140px 0;

}

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

.section-title {

    text-align: center;

    margin-bottom: 60px;

}

.section-title span {

    display: inline-block;

    color: var(--primary);

    font-size: .85rem;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}

.section-title h2 {

    margin-top: 15px;

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

}

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

.card {

    background: var(--bg-card);

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

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

    transition: var(--transition);

}

.card:hover {

    border-color: var(--border-active);

    transform: translateY(-4px);

}

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

.grid {

    display: grid;

    gap: 25px;

}

.grid-2 {

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

}

.grid-3 {

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

}

.grid-4 {

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

}

/* ==========================================================
   BADGES
========================================================== */

.badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 14px;

    border-radius: 100px;

    background: rgba(17,223,247,.08);

    border: 1px solid rgba(17,223,247,.15);

    color: var(--primary);

    font-size: .85rem;

    font-weight: 600;

}

/* ==========================================================
   FUTURE FEATURE
========================================================== */

.future-feature {

    position: relative;

}

.future-feature::after {

    content: "Próximamente";

    position: absolute;

    top: -8px;
    right: -8px;

    background: var(--primary);

    color: #000;

    font-size: .65rem;

    font-weight: 700;

    padding: 3px 8px;

    border-radius: 100px;

}

/* ==========================================================
   NOTICE
========================================================== */

.feature-notice {

    background: var(--bg-secondary);

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

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

    padding: 30px;

}

.feature-notice h3 {

    margin-bottom: 10px;

}

.feature-notice p {

    color: var(--text-muted);

}

/* ==========================================================
   LOADING
========================================================== */

.skeleton {

    position: relative;

    overflow: hidden;

}

.skeleton::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.08),
        transparent
    );

    animation: loading 1.4s infinite;

}

@keyframes loading {

    from {

        transform: translateX(-100%);

    }

    to {

        transform: translateX(100%);

    }

}

/* ==========================================================
   ANIMATIONS
========================================================== */

.fade-in {

    animation: fadeIn .4s ease;

}

@keyframes fadeIn {

    from {

        opacity: 0;
        transform: translateY(15px);

    }

    to {

        opacity: 1;
        transform: translateY(0);

    }

}

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

@media (max-width: 1200px) {

    .grid-4 {

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

    }

}

@media (max-width: 768px) {

    .grid-2,
    .grid-3,
    .grid-4 {

        grid-template-columns:
        1fr;

    }

    .section {

        padding: 70px 0;

    }

    .container {

        padding-left: 15px;
        padding-right: 15px;

    }

}

@media (max-width: 480px) {

    .btn {

        width: 100%;

    }

}