/* ==========================================================
   CANNACORE - ESTILOS GLOBALES
========================================================== */

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

/* Variables */

:root{

    --primary:#c6ff00;
    --primary-hover:#d8ff4d;

    --black:#000;
    --dark:#101010;

    --gray:#8d8d8d;

    --white:#ffffff;

    --glass:rgba(0,0,0,.35);

    --glass-border:rgba(255,255,255,.05);

}

/* RESET */

*{

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

}

html{

    scroll-behavior:smooth;

}

body{

    background:#000;

    color:white;

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

    overflow-x:hidden;

}

/* LINKS */

a{

    color:inherit;

    text-decoration:none;

}

/* BOTONES */

button{

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

}

/* TITULOS */

h1,h2,h3,h4{

    font-family:'Bebas Neue',sans-serif;

    font-weight:400;

    letter-spacing:2px;

}

/* CONTENEDOR */

.container{

    width:min(1400px,92%);

    margin:auto;

}

/* VIDEO */

.video-background{

    position:fixed;

    inset:0;

    z-index:-2;

    overflow:hidden;

}

.video-background video{

    width:100%;

    height:100%;

    object-fit:cover;

}

/* CAPA OSCURA */

.overlay{

    position:relative;

    min-height:100vh;

    background:rgba(0,0,0,.58);

}

/* BOTÓN VERDE */

.btn-primary{

    display:flex;

    justify-content:center;

    align-items:center;

    min-width:240px;

    height:60px;

    padding:0 30px;

    background:var(--primary);

    color:#000;

    border:none;

    border-radius:5px;

    font-weight:700;

    letter-spacing:2px;

    cursor:pointer;

    transition:.3s;

}

.btn-primary:hover{

    background:var(--primary-hover);

    transform:translateY(-2px);

}

/* BOTÓN TRANSPARENTE */

.btn-secondary{

    display:flex;

    justify-content:center;

    align-items:center;

    min-width:220px;

    height:60px;

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

    color:var(--primary);

    background:transparent;

    border-radius:5px;

    transition:.3s;

    cursor:pointer;

}

.btn-secondary:hover{

    background:var(--primary);

    color:#000;

}

/* TARJETAS */

.card{

    background:var(--glass);

    backdrop-filter:blur(8px);

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

    border-radius:10px;

}

/* ESPACIADO */

.section{

    padding:120px 0;

}

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

.floating-logo{

    position:fixed;

    top:7px;

    left:35px;

    z-index:2000;

    pointer-events:none;

}

.floating-logo img{

    height:42px;

    width:auto;

    object-fit:contain;

    opacity:.95;

}

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

.hero-content{

    width:100%;

    max-width:760px;

    padding:140px 60px 120px;

    position:relative;

    z-index:5;

}

.hero-subtitle{

    color:var(--primary);

    font-size:.72rem;

    letter-spacing:7px;

    margin-bottom:28px;

    font-weight:700;

}

.hero-title{

    font-size:8.5rem;

    line-height:.88;

    font-weight:900;

    letter-spacing:-4px;

    color:#f3f3f3;

    margin-bottom:38px;

}

.hero-title span{

    color:var(--primary);

}

.hero-description{

    max-width:620px;

    line-height:1.8;

    font-size:1.15rem;

    color:#d8d8d8;

    margin-bottom:45px;

}

.hero-buttons{

    display:flex;

    gap:16px;

    align-items:center;

}

/*==================================================
                MERCADO
==================================================*/

.market-section{

    width:100%;

    min-height:100vh;

    padding:120px 60px;

    background:linear-gradient(

        to bottom,

        rgba(0,0,0,.75),

        rgba(0,0,0,.88)

    );

}

.market-header{

    max-width:1400px;

    margin:0 auto 70px;

}

.market-subtitle{

    color:var(--primary);

    font-size:.72rem;

    letter-spacing:6px;

    margin-bottom:25px;

    font-weight:700;

}

.market-header h2{

    font-size:5.5rem;

    line-height:.92;

    letter-spacing:-3px;

}

.market-header h2 span{

    color:var(--primary);

}

.market-grid{

    display:grid;

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

    max-width:1450px;

    margin:auto;

}

.market-card{

    background:rgba(0,0,0,.35);

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

    padding:42px;

    min-height:360px;

    transition:.3s;

}

.market-card:hover{

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

}

.featured-card{

    background:rgba(198,255,0,.08);

}

.market-number{

    font-size:4.5rem;

    color:var(--primary);

    font-weight:900;

    margin-bottom:15px;

}

.market-label{

    color:#758064;

    font-size:.72rem;

    letter-spacing:4px;

    margin-bottom:25px;

}

.market-card p{

    color:#d2d2d2;

    line-height:1.9;

}

/*====================================
        ICONOS DEL MERCADO
====================================*/

.market-icon{

    width:62px;
    height:62px;

    border-radius:50%;

    border:1px solid rgba(198,255,0,.20);

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

    color:#c6ff00;

    margin-bottom:35px;

}

.market-icon svg{

    width:30px;
    height:30px;

    stroke:#c6ff00;

    stroke-width:1.8;

    fill:none;

    stroke-linecap:round;

    stroke-linejoin:round;

}