/**
 * Inter Jugadores — Estilos del frontend.
 *
 * Paleta y medidas basadas en el análisis de interfutbolsala.com.
 */

.inter-jugadores {
        --inter-verde: #1b5e20;
        --inter-verde-osc: #00503f;
        --inter-verde-prof: #004b3c;
        --inter-verde-medio: #006742;
        --inter-verde-nombre: #18a85f;
        --inter-verde-claro: #83d9a8;
        --inter-menta: #7ad29c;
        --inter-menta-suave: #a9e2c1;
        --inter-blanco-hueso: #fafcf8;
        --inter-fondo: #f5f8f6;
        --inter-titulo: #16231f;
        --inter-texto: #52605a;
        --inter-label: #68766f;
        --inter-valor: #26322e;
        --inter-radio: 18px;
        --inter-sombra: 0 4px 24px rgba(0, 0, 0, 0.1);
        --inter-sombra-alta: 0 14px 34px rgba(0, 0, 0, 0.18);

        box-sizing: border-box;
        font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        color: var(--inter-texto);
        -webkit-font-smoothing: antialiased;
}

.inter-jugadores *,
.inter-jugadores *::before,
.inter-jugadores *::after {
        box-sizing: inherit;
}

.inter-jugadores img {
        max-width: 100%;
        height: auto;
}

.inter-aviso {
        margin: 24px 0;
        padding: 18px 22px;
        background: var(--inter-fondo);
        border-left: 4px solid var(--inter-verde-claro);
        border-radius: 10px;
        font-size: 15px;
        color: var(--inter-texto);
}

/* -------------------------------------------------------------------------
 * Aviso de licencia
 * ---------------------------------------------------------------------- */

.inter-license-notice {
        margin: 28px auto;
        max-width: 720px;
        padding: 26px 30px;
        background: #fff8f8;
        border: 1px solid #f0c9c9;
        border-left: 5px solid #b32d2e;
        border-radius: 14px;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
        font-family: "Montserrat", sans-serif;
        text-align: center;
}

.inter-license-notice p {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.5;
        color: #8a1f20;
}

/* -------------------------------------------------------------------------
 * Animaciones de aparición
 * ---------------------------------------------------------------------- */

/*
 * Mejora progresiva: el contenido es visible por defecto. La clase
 * .inter-anim solo la añade el JS cuando puede animar de verdad, de modo que
 * si los scripts fallan o están bloqueados nunca queda contenido invisible.
 */
.inter-anim .inter-fade {
        opacity: 0;
        transform: translateY(26px);
        transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
        will-change: opacity, transform;
}

.inter-anim .inter-fade.inter-visible {
        opacity: 1;
        transform: none;
}

@media (prefers-reduced-motion: reduce) {
        .inter-anim .inter-fade {
                opacity: 1 !important;
                transform: none !important;
                transition: none !important;
        }
}

/* =========================================================================
 * PLANTILLA — [inter_plantilla]
 * ====================================================================== */

.inter-plantilla {
        width: 100%;
        max-width: 1080px;
        margin: 0 auto;
        padding: 30px 0 40px;
}

.inter-plantilla-titulo {
        margin: 0 0 26px;
        padding-bottom: 12px;
        border-bottom: 1px solid #e6ebe8;
        font-size: 22px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: #555;
}

.inter-plantilla-foto {
        margin: 0 0 40px;
        overflow: hidden;
        border-radius: var(--inter-radio);
        box-shadow: var(--inter-sombra);
        line-height: 0;
}

.inter-plantilla-foto img {
        display: block;
        width: 100%;
        height: auto;
        transition: transform 0.6s ease;
}

.inter-plantilla-foto:hover img {
        transform: scale(1.02);
}

.inter-seccion {
        margin-bottom: 46px;
}

.inter-seccion:last-child {
        margin-bottom: 0;
}

.inter-seccion-titulo {
        display: flex;
        align-items: center;
        gap: 14px;
        margin: 0 0 22px;
        font-size: 20px;
        font-weight: 900;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--inter-titulo);
}

.inter-seccion-titulo::after {
        content: "";
        flex: 1;
        height: 3px;
        background: linear-gradient(90deg, var(--inter-verde-claro), rgba(131, 217, 168, 0));
        border-radius: 3px;
}

/* Cuadrícula de tarjetas */

.inter-grid-jugadores {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 30px;
}

.inter-cols-1 .inter-grid-jugadores {
        grid-template-columns: minmax(0, 1fr);
}

.inter-cols-2 .inter-grid-jugadores {
        grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inter-cols-4 .inter-grid-jugadores {
        grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media screen and (max-width: 1024px) {
        .inter-grid-jugadores,
        .inter-cols-3 .inter-grid-jugadores,
        .inter-cols-4 .inter-grid-jugadores {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 22px;
        }
}

@media screen and (max-width: 600px) {
        .inter-grid-jugadores,
        .inter-cols-2 .inter-grid-jugadores,
        .inter-cols-3 .inter-grid-jugadores,
        .inter-cols-4 .inter-grid-jugadores {
                grid-template-columns: minmax(0, 1fr);
                gap: 20px;
        }
}

/* Tarjeta de jugador */

.inter-card {
        position: relative;
        display: block;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        border-radius: var(--inter-radio);
        box-shadow: var(--inter-sombra);
        text-decoration: none !important;
        transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.35s ease, opacity 0.7s ease;
}

.inter-card:hover,
.inter-card:focus-visible {
        transform: scale(1.03) translateY(-4px);
        box-shadow: var(--inter-sombra-alta);
}

.inter-card:focus-visible {
        outline: 3px solid var(--inter-verde-claro);
        outline-offset: 3px;
}

/* Fondo verde degradado del club, recreado con CSS */

.inter-card-bg {
        position: absolute;
        inset: 0;
        background:
                radial-gradient(
                        circle at 56% 38%,
                        rgba(255, 255, 255, 0.95) 0%,
                        rgba(250, 252, 248, 0.7) 24%,
                        rgba(169, 226, 193, 0.26) 46%,
                        rgba(122, 210, 156, 0) 66%
                ),
                linear-gradient(
                        180deg,
                        #5cc287 0%,
                        #86d6a6 20%,
                        #e9f7ef 44%,
                        #a8ddc0 60%,
                        #63b48d 76%,
                        #3f9a72 88%,
                        #2c8763 100%
                );
}

.inter-card-bg::after {
        /*
         * Velo inferior suave: oscurece lo justo para que el nombre en blanco
         * contraste, manteniendo el fondo verde medio en el que el dorsal
         * verde oscuro sigue siendo legible (igual que en la tarjeta original).
         */
        content: "";
        position: absolute;
        inset: auto 0 0 0;
        height: 48%;
        background: linear-gradient(
                180deg,
                rgba(0, 72, 55, 0) 0%,
                rgba(0, 72, 55, 0.12) 42%,
                rgba(0, 68, 52, 0.28) 72%,
                rgba(0, 62, 48, 0.4) 100%
        );
}

.inter-card-watermark {
        position: absolute;
        top: 4%;
        left: 50%;
        transform: translateX(-50%);
        font-size: clamp(38px, 9vw, 74px);
        font-weight: 900;
        font-style: italic;
        line-height: 1;
        letter-spacing: -0.02em;
        color: rgba(255, 255, 255, 0.55);
        pointer-events: none;
        user-select: none;
}

.inter-cols-1 .inter-card-watermark,
.inter-cols-2 .inter-card-watermark {
        font-size: clamp(44px, 6vw, 88px);
}

/* Foto del jugador */

.inter-card-foto {
        position: absolute;
        inset: 11% 0 0 0;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        overflow: hidden;
}

.inter-card-foto img {
        display: block;
        width: auto;
        max-width: 88%;
        height: 100%;
        object-fit: contain;
        object-position: bottom center;
        filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.22));
        transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.inter-card:hover .inter-card-foto img,
.inter-card:focus-visible .inter-card-foto img {
        transform: translateY(-4px) scale(1.02);
}

/* Bloque de número + nombre + posición */

.inter-card-info {
        position: absolute;
        inset: auto 0 0 0;
        display: flex;
        align-items: flex-end;
        gap: 8px;
        padding: 0 18px 14px;
}

.inter-card-dorsal {
        flex: 0 0 auto;
        /* line-height 0.9 evita que el glifo se recorte contra el borde inferior. */
        font-size: clamp(48px, 12vw, 96px);
        font-weight: 900;
        line-height: 0.9;
        letter-spacing: -0.04em;
        color: #00352c;
        text-shadow: 0 3px 14px rgba(0, 0, 0, 0.28);
        font-variant-numeric: tabular-nums;
}

.inter-card-textos {
        display: flex;
        flex-direction: column;
        min-width: 0;
        padding-bottom: 8px;
}

.inter-card-nombre {
        font-size: clamp(18px, 3.6vw, 30px);
        font-weight: 900;
        line-height: 1.02;
        letter-spacing: 0.01em;
        text-transform: uppercase;
        color: #fff;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
        overflow-wrap: break-word;
}

.inter-card-posicion {
        margin-top: 2px;
        font-size: clamp(12px, 1.9vw, 16px);
        font-weight: 400;
        line-height: 1.2;
        color: rgba(255, 255, 255, 0.94);
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

/* =========================================================================
 * FICHA — [inter_jugador_ficha]
 * ====================================================================== */

.inter-ficha {
        width: 100%;
}

/* Cabecera / hero */

.inter-hero {
        position: relative;
        width: 100%;
        min-height: 472px;
        overflow: hidden;
}

/*
 * Cabecera a sangre: rompe el contenedor del tema para ocupar todo el ancho
 * de la ventana. Se usa la variable --inter-vw (calculada por JS a partir de
 * documentElement.clientWidth) para excluir el ancho de la barra de scroll y
 * evitar así el scroll horizontal; 100vw queda como valor de reserva.
 * Con ancho="contenedor" en el shortcode se desactiva este comportamiento.
 */
.inter-ficha-ancho-completo .inter-hero,
.inter-ficha-ancho-completo .inter-ficha-body {
        width: var(--inter-vw, 100vw);
        max-width: var(--inter-vw, 100vw);
        margin-left: calc(50% - var(--inter-vw, 100vw) / 2);
        margin-right: calc(50% - var(--inter-vw, 100vw) / 2);
}

.inter-hero-bg {
        position: absolute;
        inset: 0;
        background:
                radial-gradient(
                        circle at 58% 47%,
                        rgba(255, 255, 255, 0.96) 0%,
                        rgba(250, 252, 248, 0.8) 24%,
                        rgba(169, 226, 193, 0.3) 50%,
                        rgba(122, 210, 156, 0) 72%
                ),
                linear-gradient(
                        180deg,
                        #79ce99 0%,
                        #9adcb4 22%,
                        #f2faf5 50%,
                        #cfe9da 70%,
                        #457b6f 88%,
                        #00503d 100%
                );
}

.inter-hero-watermark {
        position: absolute;
        top: 4%;
        left: 50%;
        transform: translateX(-50%);
        font-size: clamp(90px, 16vw, 230px);
        font-weight: 900;
        font-style: italic;
        line-height: 1;
        letter-spacing: -0.03em;
        color: rgba(255, 255, 255, 0.5);
        pointer-events: none;
        user-select: none;
}

.inter-hero-inner {
        position: relative;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 60px;
        width: 100%;
        max-width: 1180px;
        min-height: 472px;
        margin: 0 auto;
        padding: 30px 20px 0;
}

.inter-hero-foto {
        flex: 0 0 auto;
        align-self: flex-end;
        max-width: 340px;
        animation: inter-hero-in 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.inter-hero-foto img {
        display: block;
        width: 100%;
        max-height: 440px;
        object-fit: contain;
        object-position: bottom center;
        filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.25));
}

.inter-hero-datos {
        display: flex;
        align-items: baseline;
        gap: 20px;
        flex: 0 1 auto;
        padding-bottom: 92px;
        animation: inter-hero-in 0.9s 0.1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.inter-hero-dorsal {
        font-size: clamp(72px, 10vw, 142px);
        font-weight: 900;
        line-height: 0.86;
        letter-spacing: -0.05em;
        color: var(--inter-verde-osc);
        font-variant-numeric: tabular-nums;
}

.inter-hero-nombre-wrap {
        min-width: 0;
}

.inter-hero-nombre {
        margin: 0;
        font-family: "Montserrat", sans-serif;
        font-size: clamp(36px, 5.2vw, 72px);
        font-weight: 900;
        line-height: 1;
        letter-spacing: -0.01em;
        color: var(--inter-verde-nombre);
        text-transform: capitalize;
}

.inter-hero-posicion {
        margin: 8px 0 0;
        font-size: clamp(18px, 2.4vw, 31px);
        font-weight: 700;
        line-height: 1.1;
        color: var(--inter-titulo);
}

@keyframes inter-hero-in {
        from {
                opacity: 0;
                transform: translateY(28px);
        }

        to {
                opacity: 1;
                transform: none;
        }
}

@media (prefers-reduced-motion: reduce) {
        .inter-hero-foto,
        .inter-hero-datos {
                animation: none;
        }
}

@media screen and (max-width: 900px) {
        .inter-hero,
        .inter-hero-inner {
                min-height: 0;
        }

        .inter-hero-inner {
                flex-direction: column;
                align-items: center;
                gap: 10px;
                padding: 28px 20px 34px;
                text-align: center;
        }

        .inter-hero-foto {
                order: 2;
                max-width: 260px;
        }

        .inter-hero-foto img {
                max-height: 320px;
        }

        .inter-hero-datos {
                order: 1;
                justify-content: center;
                padding-bottom: 0;
        }

        /*
         * En móvil el dorsal queda centrado sobre la marca de agua. Se reduce su
         * opacidad y se recorta por arriba para que funcione como textura de fondo
         * y no se confunda con las letras (evita que se lea «in8er»).
         */
        .inter-hero-watermark {
                top: -1%;
                font-size: clamp(120px, 30vw, 200px);
                color: rgba(255, 255, 255, 0.28);
        }
}

@media screen and (max-width: 480px) {
        .inter-hero-datos {
                flex-direction: column;
                align-items: center;
                gap: 0;
        }

        .inter-hero-nombre-wrap {
                text-align: center;
        }
}

/* Cuerpo de la ficha */

.inter-ficha-body {
        padding: 46px 20px 56px;
        background: var(--inter-fondo);
}

.inter-panel {
        max-width: 1180px;
        margin: 0 auto 28px;
        padding: 32px 35px 26px;
        background: #fff;
        border-radius: var(--inter-radio);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.09), 0 6px 6px rgba(0, 0, 0, 0.07);
}

.inter-panel:last-child {
        margin-bottom: 0;
}

.inter-panel-titulo {
        margin: 0 0 25px;
        font-family: "Montserrat", sans-serif;
        font-size: clamp(22px, 3vw, 31px);
        font-weight: 900;
        line-height: 1.15;
        color: var(--inter-titulo);
}

/* Información personal */

/*
 * Rejilla de datos personales. Se limita a 4 columnas en escritorio para que
 * los campos queden repartidos en filas equilibradas en lugar de estirarse en
 * una única fila muy fina.
 */
.inter-datos-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px 26px;
}

@media screen and (max-width: 1100px) {
        .inter-datos-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
        }
}

@media screen and (max-width: 780px) {
        .inter-datos-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
        }
}

@media screen and (max-width: 460px) {
        .inter-datos-grid {
                grid-template-columns: minmax(0, 1fr);
        }
}

.inter-dato {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding-bottom: 12px;
        border-bottom: 1px solid #eef2f0;
}

.inter-dato-label {
        font-size: 13px;
        font-weight: 400;
        color: var(--inter-label);
}

.inter-dato-valor {
        font-size: 15px;
        font-weight: 700;
        color: var(--inter-titulo);
}

/* Trayectoria */

.inter-trayectoria {
        position: relative;
        margin: 0;
        padding: 0 0 0 24px;
        list-style: none;
}

.inter-trayectoria::before {
        content: "";
        position: absolute;
        top: 8px;
        bottom: 12px;
        left: 5px;
        width: 2px;
        background: linear-gradient(180deg, var(--inter-verde-claro), #e2f0e8);
        border-radius: 2px;
}

.inter-trayectoria-item {
        position: relative;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        min-height: 37px;
        padding: 9px 0;
        border-bottom: 1px solid #f1f5f3;
}

.inter-trayectoria-item:last-child {
        border-bottom: none;
}

.inter-trayectoria-punto {
        position: absolute;
        top: 16px;
        left: -23px;
        width: 12px;
        height: 12px;
        background: #fff;
        border: 3px solid var(--inter-verde-nombre);
        border-radius: 50%;
        transition: transform 0.3s ease, background-color 0.3s ease;
}

.inter-trayectoria-item:hover .inter-trayectoria-punto {
        background: var(--inter-verde-claro);
        transform: scale(1.2);
}

.inter-trayectoria-contenido {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
}

.inter-trayectoria-equipo {
        font-size: 14px;
        font-weight: 700;
        color: var(--inter-valor);
}

.inter-trayectoria-division {
        font-size: 12px;
        font-weight: 400;
        color: var(--inter-label);
}

.inter-trayectoria-temporada {
        flex: 0 0 auto;
        font-size: 13px;
        font-weight: 700;
        text-align: right;
        color: var(--inter-valor);
}

/* Palmarés */

.inter-palmares-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
        gap: 18px;
}

.inter-trofeo {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 18px 16px;
        background: linear-gradient(160deg, #f4fbf7 0%, #e6f6ec 55%, #d7f0e2 100%);
        border: 1px solid #dbeee3;
        border-radius: 16px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
        transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.3s ease;
}

.inter-trofeo:hover {
        transform: scale(1.03) translateY(-3px);
        box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
}

.inter-trofeo-icono {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        margin-bottom: 4px;
        background: rgba(255, 255, 255, 0.85);
        border-radius: 12px;
        color: var(--inter-verde-medio);
}

.inter-trofeo-titulo {
        margin: 0;
        font-size: 15px;
        font-weight: 900;
        line-height: 1.25;
        color: var(--inter-titulo);
}

.inter-trofeo-temporada {
        font-size: 13px;
        font-weight: 700;
        color: var(--inter-verde-medio);
}

.inter-trofeo-equipo {
        font-size: 12px;
        font-weight: 400;
        color: var(--inter-label);
}

@media screen and (max-width: 600px) {
        .inter-panel {
                padding: 24px 20px 20px;
        }

        .inter-ficha-body {
                padding: 32px 14px 40px;
        }

        .inter-trayectoria-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 2px;
        }

        .inter-trayectoria-temporada {
                text-align: left;
        }

        .inter-palmares-grid {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
                gap: 14px;
        }
}