/* CSS RESET & SETUP */

/* !! NO USAR HASTA QUE EL 100% DEL REDISEÑO BPLAY 2025 HAYA SIDO COMPLETADO (EVITAR CONFLICTO DE CONVIVENCIA CON ESTILOS BASE ACTUALES) 
*, 
*::after, 
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}
*/

/* !! NO USAR HASTA QUE EL 100% DEL REDISEÑO BPLAY 2025 HAYA SIDO COMPLETADO (EVITAR CONFLICTO DE CONVIVENCIA CON ESTILOS BASE ACTUALES) 

body {
    font-family: Inter;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

*/

/* CSS PROPERTIES (VARIABLES) */

:root {
    /* Colors */
    --Bases-Light-Gray: #ECECEC;
    --Bases-Pure-White: #FCFCFC;
    --Bases-Medium-Light-Gray: #D9D9D9;
    --Bases-Medium-Gray: #C7C7C7;
    --Bases-Dark-Gray: rgba(252, 252, 252, 0.16);
    --Bases-Darker-Gray: #2D2D2D;
    --Bases-Black: #1A1A1A;
    --Bases-Darkest: #252525;
    --Principales-Verde-Bplay: #04F77C;
    --Principales-Verde-primario: #05E172;
    --Principales-Verde-secundario: #0CAB5A;
    --Principales-Verde-Terciario: #00683E;
    --Especiales-Lines: #454545;
    --Semanticos-Info---Light: #12B0EA;
    --Semanticos-Info---Dark: #178FBB;
    --Semanticos-Warning: #FFC300;
    --Semanticos-Error---Light: #F8394E;
    --Semanticos-Error---Dark: #CC1428;
    --especiales-txt-button-disable: rgba(69, 69, 69, 0.20);
    --especiales-bg-button-disable: rgba(199, 199, 199, 0.40);
    
    /* Sizes */
    --Size-Mini: 4px;
    --Size-Smallest: 8px;
    --Size-Smaller: 10px;
    --Size-Small: 12px;
    --Size-Medium: 14px;
    --Size-Big: 16px;
    --Size-Extrabig: 20px;
    --Size-Huge: 24px;
    --Size-Gigantic: 28px;
}

body * {
    transition: opacity 0.3s;
}

/* TYPOGRAPHY */
/* Fonts */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    src: url("./../../fonts/Inter_18pt-Regular.ttf");
    font-display: swap;
}
@font-face {
    font-family: 'Inter-Italic';
    font-style: italic;
    font-weight: 400;
    src: url("./../../fonts/Inter_18pt-Italic.ttf");
    font-display: swap;
}
@font-face {
    font-family: 'Inter-Bold';
    font-style: normal;
    font-weight: 700;
    src: url("./../../fonts/Inter_18pt-Bold.ttf");
    font-display: swap;
}

/* Text color */
.text__color--white {
    color: var(--Bases-Pure-White, #FCFCFC);
}
.text__color--green {
    color: var(--Principales-Verde-Bplay, lightgreen);
}
.text__color--secondary-green {
    color: var(--Principales-Verde-secundario, #0CAB5A);
}
.text__color--darkred {
    color: var(--Semanticos-Error---Dark, #CC1428);
}
.text__color--light {
    color: var(--Bases-Light-Gray, #ECECEC);
}
.text__color--darker {
    color: var(--Bases-Darker-Gray, #2D2D2D);
}
.text__color--darkest {
    color: var(--Bases-Darkest, #252525);
}

/* Text size */
.text__size--smallest {
    font-size: var(--Size-Smallest, 8px);
}
.text__size--smaller {
    font-size: var(--Size-Smaller, 10px);
}
.text__size--small {
    font-size: var(--Size-Small, 12px);
}
.text__size--medium {
    font-size: var(--Size-Medium, 14px);
}
.text__size--big {
    font-size: var(--Size-Big, 16px);
}
.text__size--extrabig {
    font-size: var(--Size-Extrabig, 20px);
}

/* Text height */
.text__height--small {
    line-height: var(--Size-Small, 12px);
}
.text__height--medium {
    line-height: var(--Size-Medium, 14px);
}
.text__height--big {
    line-height: var(--Size-Big, 16px);
}
.text__height--extrabig {
    line-height: var(--Size-Extrabig, 20px);
}
.text__height--huge {
    line-height: var(--Size-Huge, 24px);
}

/* Text weight */
.text__weight--light {
    font-weight: 400;
}
.text__weight--heavy {
    font-weight: 700;
}

/* LAYOUT SCHEMES */

.layout--grid {
    display: grid;
    grid-template-columns: 0 0 repeat(12, 1fr) 0 0;
    align-items: center;
    column-gap: var(--Size-Big, 16px);
    transition: opacity 0.3s;
}
@media screen and (max-width: 1279px) {
    .layout--grid {
        grid-template-columns: 0 0 repeat(8, 1fr) 0 0;
    }
}
@media screen and (max-width: 767px) {
    .layout--grid {
        grid-template-columns: 0 repeat(4, 1fr) 0;
    }
}
.layout--block {
    display: block;
}
.layout--flex {
    display: flex;
}
.layout--none {
    display: none;
}

/* POSITIONING */
.bplay25-row-start {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.bplay25-row-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.bplay25-row-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bplay25-row-end {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.bplay25-column-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ALIGNMENT */
.text__align--left {
    text-align: left;
}
.text__align--center {
    text-align: center;
}
.text__align--right {
    text-align: right;
}

/* SPACING */
/* Margin */
.margin__vertical--mini {
    margin: var(--Size-Mini, 4px) 0 var(--Size-Mini, 4px) 0;
}
.margin__vertical--small {
    margin: var(--Size-Small, 12px) 0 var(--Size-Small, 12px) 0;
}

.margin__top--smallest {
    margin-top: var(--Size-Smallest, 8px);
}
.margin__top--extrabig {
    margin-top: var(--Size-Extrabig, 20px);
}

.margin__bottom--smallest {
    margin-bottom: var(--Size-Smallest, 8px);
}
.margin__bottom--big {
    margin-bottom: var(--Size-Big, 16px);
}
.margin__bottom--huge {
    margin-bottom: var(--Size-Huge, 24px);
}

/* Padding */
.padding--smallest {
    padding: var(--Size-Smallest, 8px);
}

.padding__vertical--mini {
    padding: var(--Size-Mini, 4px) 0 var(--Size-Mini, 4px) 0;
}

.padding__top--big {
    padding-top: var(--Size-Big, 16px);
}
.padding__left--smallest {
    padding-left: var(--Size-Smallest, 8px);
}

.padding__bottom--gigantic {
    padding-bottom: var(--Size-Big, 28px);
}

.padding__left--mini {
    padding-left: var(--Size-Mini, 4px);
}
.padding__left--smallest {
    padding-left: var(--Size-Smallest, 8px);
}

/* LISTS */

/* !! NO USAR HASTA QUE EL 100% DEL REDISEÑO BPLAY 2025 HAYA SIDO COMPLETADO (EVITAR CONFLICTO DE CONVIVENCIA CON ESTILOS BASE ACTUALES) 

body ul {
    list-style: none;
} */

/* LINKS */

/* !! NO USAR HASTA QUE EL 100% DEL REDISEÑO BPLAY 2025 HAYA SIDO COMPLETADO (EVITAR CONFLICTO DE CONVIVENCIA CON ESTILOS BASE ACTUALES) 

body a {
    text-decoration: none;
    position: relative;
}
body a:hover {
    cursor: pointer;
}
body a:active,
body a:link,
body a:visited {
    color: var(--Bases-Light-Gray, #fff);
}

*/

/* UTILITIES */

/* VISUALIZATION */
.bplay25-hidden {
    opacity: 0;
    visibility: hidden;
    width: 0;
}

@media screen and (max-width: 767px) {
    .display--desktop {
        display: none;
    }
}
@media screen and (min-width: 768px) {
    .display--mobile {
        display: none;
    }
}

/* STATE */
.element--clickable {
    cursor: pointer;
}
.element--darkened {
    filter: brightness(0.2);
}
.element--inactive {
    pointer-events: none;
}

/* TRANSITIONS */

.transition__fadein {
    opacity: 1;
}

.transition__fadeout {
    opacity: 0;
}

.transition__hide--upwards {
    transform: translate(0, -100px);
}

.transition__hide--downwards {
    transform: translate(0, 100px);
}

.transition__show--downwards, 
.transition__show--upwards {
    transform: translate(0, 0);
}

.transition__height--max {
    max-height: 100%;
}

.transition__height--min {
    max-height: 0;
}

/* !! USAR DURANTE CONVIVENCIA ENTRE ESTILOS BASE. ELIMINAR CUANDO EL 100% DE LA IMPLANTACIÓN DEL NUEVO REDISEÑO ESTÉ COMPLETADA */
p + P {
    margin-top: 0;
}

ol, ul {
    list-style-type: disc;
    padding-left: 0;
    margin-bottom: 0;
}

nav a {
    color: var(--Bases-Light-Gray, #ECECEC);
}

aside nav a,
button {
    font-family: "Inter";
}

input {
    margin-bottom: 0;
}

section {
    margin-bottom: 0;
    padding: 0;
}

.grid {
    grid-template-columns: 0 0 repeat(12, 1fr) 0 0;
    grid-template-rows: auto;
    grid-row-gap: 0;
    grid-column-gap: var(--Size-Big, 16px);
}
.grid p {
    margin-bottom: 0;
}
.grid a {
    text-decoration: none;
}
.main {
    grid-column: 1 / -1;
    transition: filter 2s;
    top: 0;
    -webkit-filter: none;
    filter: none;
}
@media screen and (max-width: 1279px) {
    .grid {
        grid-template-columns: 0 0 repeat(8, 1fr) 0 0;
    }
}
@media screen and (max-width: 770px) {
    main {
        margin-top: 0 !important;
    }
}
@media screen and (max-width: 767px) {
    .grid {
        grid-template-columns: 0 repeat(4, 1fr) 0;
        grid-template-rows: 0 auto;
    }
    .mainContenedor--headerDisplaced {
        margin-top: 100px !important;
    }

    .mainContenedor--headerDisplaced--loggedin {
        margin-top: 124px !important;
    }
}

/*@media (min-width: 1390px) {
    section {
        width: 100%;
    }
}
@media screen and (max-width: 1655px) {
    section {
        width: 100%;
    }
}*/
footer {
    margin-top: 0;
}
/* FIN DE ADVERTENCIA */
/* ------------------ */