@charset "UTF-8";
::-moz-focus-inner {
    border: 0;
}

:root {
    /* Colores que se utilizarán */
    --color-base: #9CFF00;
    --color-secundario: #9CFF00;
    --color-terciario: #9CFF00;
    --color-terciarioB: #be8f0a;
    /* Posición superior de los botones, menos el primero */
    --margin-top: 10px;
    /* Grosor de la línea que pasa a través
     de los botones */
    /* --grosor: 7px; */
    --grosor: 4px;
    /* Altura de los botones */
    --height: 55px;
    --heightTitulo: 50px;
    --width: 800px;
    /* Relleno de los botones en porcentaje
     que será directamente proporcional a la
     inclinación de sus ángulos en función de la
     posición de sus 4 nodos principales */
    /* --relleno: 10%; */
    --relleno: 3%;
    /* Separación del color de rellano del botón
     que también será parte del relleno superior
     e inferior del botón */
    --separacion: 2px;
    /* --separacion: 3px; */
    /* Formas */
    --formas: polygon( 0% 50%, var(--relleno) 0%, calc(100% - var(--relleno)) 0%, 100% 50%, calc(100% - var(--relleno)) 100%, var(--relleno) 100%);
    /* Imágenes de fondo de los botones */
    --fondoA: linear-gradient( 90deg, #072135, #072135);
    --fondoB: linear-gradient( 90deg, #072135, #072135);
    --fondoHeader: linear-gradient( 90deg, #072135, #072135);
}


/* Contenedor principal de los botones */

.millonario {
    margin: 0 auto;
    max-width: var(--width);
    /* En este item van a estar los botones y las líneas
     que atraviesan los botones */
}

.millonario__item {
    position: relative;
    min-height: var(--grosor);
    transition: 300ms ease;
    /* Margen superior del contenedor
     de los botones, menos el primer contenedor */
    /* Lineas entre los botones */
}

.millonario__item:not(:first-of-type) {
    margin-top: 10px;
}

.millonario__item::before {
    display: none;
    content: "";
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    /* Fondo de las líneas que van entre los botones */
    background-color: var(--color-base);
    background-image: linear-gradient(0deg, var(--color-base), white, var(--color-secundario));
    /* Altura de las líneas que están entre los botones*/
    height: var(--grosor);
}

.opciones {
    display: flex;
}


.opciones__item {
    cursor: pointer !important;
    --padding: 10px;
    /* --padding: 50px; */
    --divisor: 2;
    /* --divisor: 4; */
    transition: 300ms ease;
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 50%;
    position: relative;
    min-height: var(--height);
    /* Margen superior a cada ITEM */
}



.opciones__item:not(:first-of-type) {
    /* Solamente cuando el ancho de la pantalla
     tenga una dimensión máxima a la indicada acá
     abajo */
}



.opciones__item::before {
    content: "";
    display: block;
    position: absolute;
    margin: auto;
    background-color: #d0dcfc;
}

.fondoMenu:hover {
    /* background-color: var(--color-terciarioB); */
    /* background-color: red; */
    font-weight: 900;
    color: #FFBF10 !important;
}


.button {
    cursor: pointer;
    display: block;
    position: relative;
    padding-left: calc(var(--relleno) + 4px);
    padding-right: calc(var(--relleno) + 4px);
    padding-top: calc(var(--separacion));
    padding-bottom: calc(var(--separacion));
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: var(--height);
    width: 100%;
    transition: 300ms ease;
    /* Forma de triángulo en los botones */
    clip-path: var(--formas);
    /* Apariencia */
    border: 0;
    /* color: #fff; */
    color: #fff;
    font-weight: bold;
    text-align: left;
    /* Formación de la imagen de fondo del botón */
    background-image: radial-gradient(white, var(--color-secundario) 30%, white 50%, var(--color-secundario));
    background-size: 120% 100%;
    background-position: center center;
}

.button:active {
    transform: scale(0.98);
}

.button::before {
    transition: 300ms ease;
    content: "";
    display: block;
    position: absolute;
    margin: auto;
    left: calc(var(--separacion) * 2);
    right: calc(var(--separacion) * 2);
    top: var(--separacion);
    bottom: var(--separacion);
    clip-path: var(--formas);
    background-color: var(--color-secundario);
    z-index: -1;
}


/* Imagen de fondo para los botones */

.fondoA::before {
    transition: 300ms ease;
}

.buttonHeader::before {
    background-image: var(--fondoHeader) !important;
}



.fondoB::before {
    background-image: var(--fondoB);
}


/* Colores */

.amarillo {
    color: var(--color-terciario);
}



@media screen and (max-width: 1999px) {
    .opciones__item:not(:first-of-type) {
        margin-top: 10px;
    }
}

@media screen and (min-width: 2000px) {
    .opciones__item:first-of-type {
        padding-left: var(--padding);
        padding-right: calc(var(--padding) / var(--divisor));
    }
}

@media screen and (min-width: 1999px) {
    .opciones__item:last-of-type {
        padding-right: var(--padding);
        padding-left: calc(var(--padding) / var(--divisor));
    }
}

@media screen and (max-width: 1999px) {
    .fondoA::before {
        background-image: var(--fondoB);
    }
}

@media screen and (min-width: 2000px) {
    .fondoA::before {
        background-image: var(--fondoA);
    }
}


@media screen and (min-width: 2000px) {
    /* No aplica para ver las opciones en 2 columnas */
    /* .millonario__item::before {
        display: block;
    } */
}

@media screen and (max-width: 1999px) {
    .millonario__item::before {
        display: none;
    }
}


@media screen and (max-width: 1999px) {
    .opciones {
        display: block;
    }
}