:root {
    --blue: #009ce4;
    --dark: #08181e;
    --white: #ffffff;
    --font-poppins: 'Poppins', sans-serif;
    --font-special: 'Special Gothic Expanded One', 'Oswald', sans-serif;
    --card-w: 130px;
    --card-h: 170px;
    --grid-gap: 13px;
}

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

body { font-family: var(--font-poppins); background-color: var(--white); color: var(--dark); }

header { text-align: center; padding: 20px 0; }
header img { max-width: 300px; width: 100%; height: auto; padding-top: 20px; }

.hero {
    position: relative;
    background-image: url('assets/banner-convocados.png');
    background-size: cover;
    background-position: center bottom;
    color: var(--white);
    text-align: center;
    padding: 60px 20px 100px;
    margin-bottom: 84px;
}

.hero-sponsor img {
    height: 84px;
}
.hero-titulo { font-family: var(--font-poppins); font-size: clamp(18px, 5.5vw, 68px); font-weight: 600; letter-spacing: 1px; }
.hero-convocados { font-family: var(--font-special); font-size: clamp(36px, 7vw, 85px); font-weight: 700; line-height: 0.6; text-transform: uppercase; margin-bottom: 5px; }
.hero p { font-size: clamp(13px, 2.2vw, 27px); font-weight: 300; max-width: 800px; margin: 0 auto; padding: 20px 0 20px; line-height: 1.3; }
.hero-sponsor { margin-top: 0px; padding-bottom: 33px; }
.hero-sponsor-logo { height: 84px; width: auto; display: block; margin: 0 auto; }

main { max-width: 950px; margin: 0 auto; padding: 40px 20px; }

.section-header { display: flex; align-items: center; margin-bottom: 25px; }
.section-header h2.title-main {
    font-family: var(--font-special);
    font-size: clamp(22px, 3.2vw, 38px);
    font-weight: 800;
    border-bottom: 4px solid var(--dark);
    line-height: 1;
    padding-bottom: 4px;
    margin-right: 15px;
    display: inline-block;
}
.section-header span.subtitle {
    font-family: var(--font-poppins);
    font-size: clamp(13px, 1.4vw, 16px);
    font-weight: 100;
    color: var(--dark);
    padding-bottom: 4px;
    line-height: 1;
}

.player-grid { display: flex; flex-wrap: wrap; gap: var(--grid-gap); margin-bottom: 60px; }

.jugador-card { position: relative; width: var(--card-w); flex: 0 0 var(--card-w); display: flex; flex-direction: column; overflow: hidden; cursor: pointer; }
.jugador-card.disabled { opacity: 0.4; }
.jugador-card.disabled .jugador-action { opacity: 0.5; cursor: not-allowed; }

.jugador-imagen-container { position: relative; width: 100%; height: var(--card-h); overflow: hidden; }
.jugador-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }

.jugador-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: var(--white);
    text-align: center;
    padding: 30px 5px 5px;
    z-index: 3;
}
.jugador-info::before,
.jugador-info::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    transition: opacity 0.2s;
}
.jugador-info::before {
    background: linear-gradient(to top, rgb(0,156,228) 0%, rgba(0,156,228,0.85) 20%, rgba(0,156,228,0) 80%);
    opacity: 1;
}
.jugador-info::after {
    background: linear-gradient(to top, rgb(8,24,30) 0%, rgba(8,24,30,0.85) 20%, rgba(8,24,30,0) 80%);
    opacity: 0;
}
.jugador-card.selected .jugador-info::after { opacity: 1; }
.jugador-card.btn-hover .jugador-info::after { opacity: 1; }
.jugador-card.selected.btn-hover .jugador-info::after { opacity: 0; }

.jugador-icono { width: 11px; height: 11px; margin: 0 auto 5px; display: block; }
.jugador-nombre { font-family: var(--font-special); font-size: 9px; font-weight: 400; margin: 0; line-height: 1.1; }
.jugador-apellido { font-family: var(--font-special); font-size: 12.5px; font-weight: 400; margin: 0; line-height: 1; text-transform: uppercase; }

.jugador-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 8px 0;
    font-family: var(--font-poppins);
    font-size: 11px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}
.jugador-action.btn-seleccionar { background-color: var(--blue); color: var(--white); }
.jugador-action.btn-seleccionado { background-color: var(--dark); color: var(--white); }
.jugador-card.btn-hover .jugador-action.btn-seleccionar { background-color: var(--dark); }
.jugador-card.selected.btn-hover .jugador-action.btn-seleccionado { background-color: var(--blue); }

.continuar-container { text-align: center; margin-top: 20px; }
.btn-continuar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 4px 16px;
    background-color: #0B161A;
    color: #ffffff;
    font-family: var(--font-poppins);
    font-size: clamp(16px, 2vw, 24px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    border-bottom: 6px solid #0077B5;
    cursor: pointer;
    transition: filter 0.2s ease;
}
.btn-continuar:hover { filter: brightness(1.2); }
.btn-continuar img { height: 22px; }

#mensaje-validacion {
    font-size: 14px;
    color: #d32f2f;
    font-weight: 600;
    margin-top: 12px;
    display: none;
}

/* Compartir section */
#compartir-section {
    display: none;
    max-width: 650px;
    margin: 20px auto 40px;
    padding: 40px 20px;
    background: #f5f5f5;
    text-align: center;
}
#compartir-section h2 {
    font-family: var(--font-poppins);
    font-size: 26px;
    font-weight: 600;
    color: var(--dark);
    margin: 0 0 25px;
}
#btn-compartir-redes {
    cursor: pointer;
    max-width: 300px;
    height: auto;
    transition: transform 0.2s;
    display: block;
    margin: 0 auto 10px;
}
#btn-compartir-redes:hover { transform: scale(1.05); }
#btn-descargar-imagen {
    font-family: var(--font-poppins);
    font-weight: 400;
    font-size: 13px;
    color: var(--dark);
    padding: 5px 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-block;
    text-decoration: none;
    border: 1px solid var(--dark);
    border-radius: 4px;
    transition: all 0.3s ease;
}
#btn-descargar-imagen:hover { background-color: var(--dark); color: #fff; }
#placa-compartir-container { margin-top: 30px; }
#placa-compartir-imagen { max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
#nueva-lista-container { display: none; text-align: center; padding-bottom: 30px; margin-bottom: 30px; }
#compartir-loading { display: none; margin-top: 20px; font-family: var(--font-poppins); color: var(--blue); font-size: 14px; }
.spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(0, 156, 228, 0.2);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 10px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.compartir-desktop .btn-compartir-red { width: auto; height: 67px; cursor: pointer; transition: transform 0.2s; margin: 0 8px; }
.compartir-desktop .btn-compartir-red:hover { transform: scale(1.05); }

/* Mobile / tablet: solo compartir nativo, ocultar desktop */
#compartir-redes-desktop { display: none; margin-bottom: 10px; }

/* Desktop: ocultar nativo, mostrar iconos por red */
@media (min-width: 901px) {
    #btn-compartir-redes    { display: none !important; }
    #compartir-redes-desktop { display: flex !important; justify-content: center; align-items: center; }
}

footer {
    background-image: url('assets/inferior.svg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    padding: 100px 20px 40px;
    text-align: center;
    color: var(--white);
    margin-top: 50px;
    min-height: 250px;
}

/* Tablet */
@media (max-width: 900px) {
    :root { --card-w: 115px; --card-h: 150px; --grid-gap: 12px; }
    header img { max-width: 240px; }
    .hero { padding: 40px 20px 70px; margin-bottom: 50px; }
    #nueva-lista-container { padding-bottom: 30px !important; margin-bottom: 30px !important; }
    #btn-nueva-lista { margin-bottom: 30px !important; }
    #nueva-lista-container + .section-header { margin-top: 30px !important; }
}

/* Móvil */
@media (max-width: 480px) {
    :root {
        --card-w: calc((100vw - 48px) / 3);
        --card-h: calc(var(--card-w) * 1.31);
        --grid-gap: 8px;
    }
    header img { max-width: 220px; }
    .hero { padding: 28px 16px 45px; margin-bottom: 25px; }
    .hero p { padding: 10px 0 33px; }
    main { padding: 20px 16px; }
    .section-header { margin-bottom: 15px; }
    .jugador-action { padding: 6px 0; font-size: 10px; }
    .jugador-icono { width: 9px; height: 9px; }
    .jugador-info { padding: 20px 3px 4px; }
    .jugador-info::before {
        background: linear-gradient(to top, rgb(0,156,228) 0%, rgba(0,156,228,0.85) 30%, rgba(0,156,228,0) 80%);
    }
    .jugador-info::after {
        background: linear-gradient(to top, rgb(8,24,30) 0%, rgba(8,24,30,0.85) 30%, rgba(8,24,30,0) 80%);
    }
    .btn-continuar img { height: 16px; }
}

/* Teléfonos muy pequeños: 2 columnas */
@media (max-width: 360px) {
    :root {
        --card-w: calc((100vw - 40px) / 2);
        --card-h: calc(var(--card-w) * 1.31);
    }
}