/*Reseteo la hoja de estilos*/
:root {
    --pix-color-primario: #000000;
    --pix-color-fondo-suave: #0e0e0e;
}
* { box-sizing: border-box; font-family: 'Roboto Condensed', sans-serif; }
html, body { margin: 0; padding: 0; background-color: var(--pix-color-fondo-suave); }

/*General*/
.divColumna { width: 100%; max-width: 1080px; margin: auto; }
a { text-decoration: none; outline: none; color: var(--pix-color-primario); }

/*Header*/
header { z-index: 100; background-color: #000000; position: fixed; top: 0; left: 0; width: 100%; height: 80px; box-shadow: 0 5px 10px rgba(0,0,0,.1); display: flex; align-items: center; padding: 0 16px; }
header > div { display: flex; align-items: center; }
header .header-right { margin-left: auto; display: flex; align-items: center; padding-right: 16px }
header .btn-header { display: inline-block; height: 80px; line-height: 80px; text-align: center; font-size: 32px; vertical-align: top; margin-left: 16px; color: #fff }
header #pixBtnLogo { display: inline-block; height: 80px; padding: 16px; vertical-align: top }
header #pixBtnLogo > img { height: 100% }

.divInfo { display: inline-block; background: #ffecb3; padding: 8px 8px 8px 36px; border-radius: 4px; margin-top: 24px; font-size: 13px; line-height: 18px; vertical-align: middle; color: #000; width: 100%; }
.divInfo p { font-size: 16px; margin: 0; color: #636363 !important; }
.divInfo p a { font-weight: 700; }
.divInfo:before { content: '\f05a'; font-family: "Font Awesome 6 Free"; width: 16px; height: 16px; display: block; text-align: center; font-size: 22px; color: #ffc107; float: left; margin-left: -30px; font-weight: 600; }

#tituloJugadores { text-align: center; color: white; }

#divJugadores { width: 95%; color: white; margin: auto; padding-left: 1rem; padding-right: 1rem }
#divJugadores .carta-jugador { margin-bottom: 20px }

#contenedorBotonWhatsApp { width: 95%; margin: auto; padding-left: 1rem; padding-right: 1rem; display: none }
#botonWhatsApp { display: block; width: 100%; height: 100%; padding: 16px; margin: auto; color: white; text-align: center; background: linear-gradient(to bottom, #25d366, #128c7e); border: 2px solid white; border-radius: 10px; font-size: 18px; font-weight: bold; }

#contenedorJugadoresParaCompartir { color: white; padding: 16px; margin-top: 16px; background-color: rgba(255, 255, 255, 0.1); border-radius: 10px }
#divJugadoresParaCompartir { font-size: 18px; color: white; padding-top: 8px }

.tituloSeleccionados { color: white; font-size: 22px; font-weight: bold; }
.jugador-seleccionado { display: inline-block; background-color: rgba(255, 255, 255, 0.1); padding: 6px; border-radius: 5px; margin-top: 6px; margin-left: 4px }

#tituloFichaJugador { text-align: center; color: white }

#fichaJugador { width: 95%; color: white; margin: auto; margin-bottom: 20px; margin-top: 20px; padding-left: 1rem; padding-right: 1rem }
#fichaJugador iframe { width: 100% !important; height: auto !important; aspect-ratio: 16/9; }

.ficha-titulo { font-size: 1.75em; }
.ficha-datos { font-size: 1.25em; }

.carta-jugador { width: 100%; background-color: #1a1a1a; border: 4px solid white; border-radius: 25px; overflow: hidden; text-align: center; }

.contenedor-imagen { position: relative; }

.contenedor-enlace { position: relative; display: block; width: 100%; height: 100%; content: ""; aspect-ratio: 1 / 1; overflow: hidden; }
.contenedor-enlace img { object-fit: cover; object-position: top; width: 100%; height: 100%; filter: opacity(0.3) }

.contenedor-nombre { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; font-family: Inter !important; color: white; width: fit-content; height: fit-content; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.contenedor-nombre span { font-size: 24px; font-weight: lighter; }
.contenedor-nombre strong { font-size: 30px; font-weight: bold; text-transform: uppercase; }

.boton-whatsapp { display: block; width: 100%; height: 100%; padding: 15px; color: white; background: linear-gradient(to bottom, #25d366, #128c7e); border-top: 2px solid white; font-size: 20px; font-weight: bold; }

.custom-padding { padding-top: 80px !important }

.pix-registro:hover { background-image: linear-gradient(to right, transparent 0%, #1f1f1f 10%, #1f1f1f 80%, transparent 100%) !important }
.pix-registro > div.pix-registro-check { padding-left: 16px !important }
.pix-registro > div.pix-registro-contenido > a > strong { color: #fff !important }
.pix-registro > div.pix-registro-contenido > a > p { color: #fff !important; text-transform: uppercase; }

.pix-check > label { color: #fff !important; }
.pix-check > label .pix-marcado { border: solid 2px rgba(255,255,255,.5) !important; background-color: #fff !important; }
.pix-check > label input:checked ~ .pix-marcado { background-color: #fff !important; }
.pix-check > label .pix-marcado:after { filter: invert(1) !important; }
.pix-check > label input:disabled ~ .pix-marcado { background-color: #ccc !important; }
.pix-check > label input:disabled:checked ~ .pix-marcado { background-color: #ddd !important; border-color: #888 !important; }
.pix-check > label:has(> input:disabled) { color: #888 !important; }

.pix-registro .pix-marcado-adicional { font-size: 16px !important }
.pix-registro > div.pix-registro-contenido > a > p { font-size: 18px !important }
.pix-registro > div.pix-registro-contenido > a > strong { font-size: 24px !important }