:root{
    --negro:#050505;
    --negro2:#101010;
    --negro3:#1a1a1a;

    --morado:#9b2cff;
    --morado2:#b96cff;
    --verde:#00c96b;

    --plata:#c8cdd2;
    --gris:#e7e8ea;
    --blanco:#ffffff;
    --texto:#171717;
}

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    min-height:100%;
    font-family:Arial,Helvetica,sans-serif;
}

body{
    background:
        radial-gradient(
            circle at top right,
            #281039 0,
            #111 32%,
            #050505 75%
        );
    color:var(--blanco);
}


/* =========================================================
   FONDO
   ========================================================= */

.fondo-dinamico{
    position:fixed;
    inset:0;
    z-index:0;

    background:
        radial-gradient(
            circle at 75% 20%,
            rgba(155,44,255,.20),
            transparent 32%
        ),
        radial-gradient(
            circle at 20% 80%,
            rgba(0,201,107,.08),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #080808,
            #18111f 50%,
            #050505
        );
}

.capa-fondo{
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.14),
            rgba(0,0,0,.48)
        );
}


/* =========================================================
   CONTENEDOR
   ========================================================= */

.app{
    position:relative;
    z-index:2;

    width:min(1450px,calc(100% - 34px));
    margin:auto;

    padding:18px 0 28px;
}

.inicio-home{
    max-width:1450px;
}


/* =========================================================
   CABECERA CULTURA AÇAÍ
   LOGO + NOMBRE CENTRADOS
   ========================================================= */

.cabecera{
    min-height:150px;

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

    gap:24px;

    padding:18px 28px;

    background:
        radial-gradient(
            circle at center,
            rgba(155,44,255,.18),
            transparent 48%
        ),
        linear-gradient(
            110deg,
            #08070a,
            #1b1022 50%,
            #07150f
        );

    border:
        1px solid rgba(155,44,255,.65);

    border-bottom:
        4px solid var(--morado);

    border-radius:24px;

    box-shadow:
        0 16px 35px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.08);
}


/* LOGO */

.logo{
    width:120px;
    height:120px;

    object-fit:contain;

    flex:0 0 120px;

    filter:
        drop-shadow(
            0 8px 15px rgba(0,0,0,.75)
        )
        drop-shadow(
            0 0 8px rgba(155,44,255,.25)
        );
}


/* BLOQUE DE TEXTO */

.marca{
    flex:0 0 auto;

    width:auto;

    min-width:0;

    text-align:center;
}


/* CULTURA AÇAÍ */

.marca h1{
    margin:0;

    font-size:48px;

    line-height:1;

    font-weight:1000;

    font-style:italic;

    letter-spacing:3px;

    color:#ffffff;

    text-align:center;

    text-shadow:
        0 3px 0 rgba(0,0,0,.5);
}


/* SOFTBALL */

.marca strong{
    display:block;

    margin-top:7px;

    color:var(--verde);

    font-size:17px;

    font-weight:1000;

    letter-spacing:9px;

    text-align:center;
}


/* FRASE */

.marca span{
    display:block;

    margin-top:12px;

    color:#ffffff;

    font-size:14px;

    font-weight:800;

    text-align:center;
}


/* =========================================================
   SELECTOR CATEGORÍA
   ========================================================= */

.selector-panel{
    margin-top:14px;

    padding:15px 20px;

    display:grid;

    grid-template-columns:
        minmax(280px,1fr)
        minmax(300px,510px);

    align-items:center;

    gap:18px;

    background:
        linear-gradient(
            100deg,
            #ffffff,
            #f0f1f2
        );

    color:#111;

    border-radius:20px;

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

    border-left:
        6px solid var(--morado);

    box-shadow:
        0 13px 27px rgba(0,0,0,.32);
}

.selector-titulo{
    display:flex;

    align-items:center;

    gap:13px;
}

.selector-titulo img{
    width:58px;
    height:58px;

    object-fit:contain;
}

.selector-titulo small{
    display:block;

    color:var(--morado);

    font-weight:1000;

    font-size:11px;

    letter-spacing:1.2px;
}

.selector-titulo strong{
    display:block;

    margin-top:3px;

    font-size:19px;

    color:#161616;
}


/* =========================================================
   SELECT
   ========================================================= */

select{
    width:100%;

    min-width:0;

    padding:14px 16px;

    border:
        1px solid #c7c7c7;

    border-radius:13px;

    background:#ffffff;

    color:#111;

    font-size:15px;

    font-weight:900;

    box-shadow:
        0 4px 12px rgba(0,0,0,.10);
}


/* =========================================================
   MÓDULOS
   ========================================================= */

.menu-grid{
    display:grid;

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

    gap:11px;

    margin-top:14px;
}

.modulo{
    position:relative;

    min-width:0;

    min-height:190px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding:16px 9px;

    text-decoration:none;

    text-align:center;

    color:var(--texto);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.99),
            rgba(235,236,238,.97)
        );

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

    border-radius:19px;

    box-shadow:
        0 12px 24px rgba(0,0,0,.32);

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease;
}

.modulo::after{
    content:"›";

    width:35px;
    height:35px;

    margin-top:12px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:#111;

    color:#fff;

    font-size:28px;

    line-height:1;

    border:
        2px solid var(--morado);
}

.modulo:hover{
    transform:
        translateY(-4px);

    border-color:
        rgba(155,44,255,.60);

    box-shadow:
        0 16px 30px rgba(0,0,0,.42),
        0 0 18px rgba(155,44,255,.16);
}

.modulo span{
    width:70px;
    height:70px;

    display:grid;

    place-items:center;

    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            #0d0d0d,
            #252525
        );

    color:#fff;

    font-size:36px;

    border:
        2px solid var(--morado);

    box-shadow:
        0 7px 15px rgba(0,0,0,.24),
        0 0 12px rgba(155,44,255,.15);
}

.modulo b{
    margin-top:10px;

    font-size:18px;

    font-weight:1000;

    line-height:1.05;
}

.modulo small{
    margin-top:6px;

    font-size:12px;

    color:#555;

    font-weight:700;
}


/* =========================================================
   ACCIONES
   ========================================================= */

.acciones{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:10px;

    margin-top:13px;
}

.acciones a,
.acciones button{
    min-height:48px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    padding:11px 15px;

    border:0;

    border-radius:13px;

    font-size:14px;

    font-weight:1000;

    text-decoration:none;

    cursor:pointer;

    box-shadow:
        0 8px 18px rgba(0,0,0,.25);
}

.acciones a{
    background:
        linear-gradient(
            180deg,
            #eeeeef,
            #c9cdd1
        );

    color:#111;
}

.acciones button{
    background:
        linear-gradient(
            135deg,
            var(--morado2),
            var(--morado)
        );

    color:#fff;
}


/* =========================================================
   PRÓXIMO PARTIDO
   ========================================================= */

.proximo{
    margin-top:14px;

    min-height:150px;

    padding:20px 27px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    background:
        linear-gradient(
            110deg,
            #080808,
            #18121d 55%,
            #281035
        );

    border:1px solid #444;

    border-left:
        6px solid var(--verde);

    border-radius:20px;

    box-shadow:
        0 14px 29px rgba(0,0,0,.35);
}

.proximo > div{
    min-width:0;
}

.proximo small{
    color:var(--verde);

    font-size:11px;

    font-weight:1000;

    letter-spacing:1.2px;
}

.proximo h2{
    margin:9px 0 5px;

    font-size:27px;

    line-height:1.15;
}

.proximo h2 em{
    display:inline-block;

    margin:0 10px;

    font-style:normal;

    color:var(--verde);
}

.proximo p{
    margin:0;

    color:#d7d7d7;

    font-size:15px;

    font-weight:700;
}

.proximo img{
    width:102px;
    height:102px;

    object-fit:contain;

    flex:0 0 102px;

    filter:
        drop-shadow(
            0 7px 12px rgba(0,0,0,.65)
        );
}


/* =========================================================
   PANELES GENERALES
   ========================================================= */

.panel{
    background:
        rgba(15,15,15,.95);

    border:
        1px solid #343434;

    border-left:
        5px solid var(--morado);

    border-radius:16px;

    padding:14px;

    margin-bottom:12px;

    box-shadow:
        0 11px 25px rgba(0,0,0,.30);
}

.panel h2{
    margin-top:0;
}


/* =========================================================
   TABLAS GENERALES
   ========================================================= */

table{
    width:100%;

    border-collapse:collapse;
}

th{
    background:#090909;

    color:#fff;
}

th,
td{
    padding:9px;

    border-bottom:
        1px solid rgba(255,255,255,.10);
}


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

input,
textarea{
    max-width:100%;

    padding:10px 11px;

    border:
        1px solid #444;

    border-radius:9px;

    background:#080808;

    color:#fff;
}


/* =========================================================
   PIE
   ========================================================= */

footer{
    text-align:center;

    padding:20px 5px 5px;

    color:#ccc;

    font-size:11px;

    font-weight:900;

    letter-spacing:.8px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1100px){

    .menu-grid{
        grid-template-columns:
            repeat(3,1fr);
    }

    .modulo{
        min-height:155px;
    }
}


/* =========================================================
   CELULAR
   ========================================================= */

@media(max-width:700px){

    .app{
        width:
            min(100% - 16px,1450px);

        padding-top:8px;
    }

    .cabecera{
        min-height:120px;

        padding:12px 10px;

        gap:10px;

        justify-content:center;

        border-radius:16px;
    }

    .logo{
        width:78px;
        height:78px;

        flex:0 0 78px;
    }

    .marca{
        flex:0 1 auto;

        text-align:center;
    }

    .marca h1{
        font-size:27px;

        letter-spacing:1px;

        text-align:center;
    }

    .marca strong{
        margin-top:5px;

        font-size:10px;

        letter-spacing:5px;

        text-align:center;
    }

    .marca span{
        margin-top:7px;

        font-size:9px;

        text-align:center;
    }

    .selector-panel{
        grid-template-columns:1fr;

        padding:11px;

        gap:9px;

        border-radius:14px;
    }

    .selector-titulo img{
        width:44px;
        height:44px;
    }

    .selector-titulo strong{
        font-size:15px;
    }

    select{
        padding:12px;
    }

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

        gap:8px;

        margin-top:10px;
    }

    .modulo{
        min-height:138px;

        padding:10px 6px;

        border-radius:14px;
    }

    .modulo span{
        width:53px;
        height:53px;

        font-size:27px;
    }

    .modulo b{
        font-size:14px;
    }

    .modulo small{
        font-size:10px;
    }

    .modulo::after{
        width:29px;
        height:29px;

        margin-top:7px;

        font-size:22px;
    }

    .acciones{
        grid-template-columns:1fr;
    }

    .proximo{
        min-height:auto;

        padding:14px;

        border-radius:15px;
    }

    .proximo h2{
        font-size:18px;
    }

    .proximo h2 em{
        margin:0 4px;
    }

    .proximo p{
        font-size:12px;
    }

    .proximo img{
        width:70px;
        height:70px;

        flex-basis:70px;
    }
}


/* =========================================================
   CELULAR PEQUEÑO
   ========================================================= */

@media(max-width:410px){

    .menu-grid{
        grid-template-columns:
            1fr 1fr;
    }

    .cabecera{
        gap:7px;
    }

    .logo{
        width:65px;
        height:65px;

        flex-basis:65px;
    }

    .marca h1{
        font-size:23px;
    }

    .marca strong{
        font-size:9px;

        letter-spacing:4px;
    }

    .marca span{
        display:none;
    }

    .proximo img{
        width:58px;
        height:58px;

        flex-basis:58px;
    }
}