/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* BODY */

body{

    font-family:'Segoe UI',sans-serif;

    background:#000;

    min-height:100vh;

    display:flex;
    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding:20px;
}

/* TOP */

.top-bar{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:22px;

    margin-bottom:20px;
}

.logo-small{

    width:135px;

    object-fit:contain;
}

.logo-u{

    width:95px;

    object-fit:contain;
}

.divider{

    width:1px;

    height:55px;

    background:
    rgba(92,0,29,0.18);
}

/* PANEL */

.panel{

    width:100%;

    max-width:690px;

    background:

    linear-gradient(
        145deg,
        #050505,
        #111111
    );

    border-radius:24px;

    padding:28px;

    position:relative;

    overflow:hidden;

    /* BORDE CREMA */

    border:1px solid #FFFDD0;

    /* SOMBRITA BORDE */

    box-shadow:
    0px 0px 8px rgba(255,253,208,0.18),
    0px 18px 40px rgba(0,0,0,0.35);
}

/* TEXTURA */

.panel::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(
        45deg,
        rgba(255,255,255,0.015) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255,255,255,0.015) 50%,
        rgba(255,255,255,0.015) 75%,
        transparent 75%,
        transparent
    );

    background-size:8px 8px;
}

/* TITULO */

.title-area{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:16px;

    margin-bottom:24px;

    position:relative;
    z-index:2;
}

.line{

    flex:1;

    max-width:120px;

    height:1px;

    background:#F5E6C8;

    opacity:0.55;
}

.title-box{

    text-align:center;
}

.title-box h1{

    color:#FFFDD0;

    font-size:26px;
	font-family:Georgia,serif;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:4px;
}

.title-box span{

    color:#FFFDD0;

    font-size:11px;

    letter-spacing:4px;

    opacity:0.8;
}

/* GRID */

.teams-grid{

    display:grid;

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

    gap:14px;

    position:relative;
    z-index:2;
}

/* CARD */

.team-card{

    background:white;

    border-radius:14px;

    height:74px;

    display:flex;

    align-items:center;

    padding:0 18px;

    gap:14px;

    transition:0.25s;

    border:
    1px solid rgba(0,0,0,0.04);
}

.team-card:hover{

    transform:translateY(-2px);

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



.icono-u{

    width:34px;

    height:34px;

    object-fit:contain;

    flex-shrink:0;

    filter:
    drop-shadow(0px 2px 4px rgba(0,0,0,0.10));
}

/* INPUT */

.team-card input{

    width:100%;

    border:none;

    outline:none;

    background:transparent;

    font-size:15px;

    font-weight:600;

    color:#5c001d;
}

.team-card input::placeholder{

    color:#7a7a7a;
}

/* BOTON */

#btnFixture{

    width:100%;

    margin-top:18px;

    border:none;

    border-radius:14px;

    padding:13px;

    background:

    linear-gradient(
        180deg,
        #F8E8BF,
        #EFD89A
    );

    color:#5c001d;

    font-size:15px;

    font-weight:600;
	letter-spacing:0.5px;

    cursor:pointer;

    transition:0.25s;

    position:relative;
    z-index:2;
}

#btnFixture:hover{

    transform:translateY(-2px);

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

/* RESPONSIVE */

@media(max-width:700px){

    .teams-grid{

        grid-template-columns:1fr;
    }

    .panel{

        padding:22px;
    }
}

/* MOBILE */

@media(max-width:700px){

    .top-bar{

        gap:14px;
    }

    .logo-small{

    width:82px;
}

    .logo-u{

        width:68px;
    }

    .title-box h1{

        font-size:20px;
    }

    .title-box span{

        font-size:10px;

        letter-spacing:3px;
    }

    .team-card{

        height:68px;
    }

    .team-card input{

        font-size:14px;
    }

    #btnFixture{

        padding:12px;

        font-size:14px;
    }
}