:root {

    --black: #070707;
    --black-2: #101010;
    --white: #f4f4f2;
    --gray: #9b9b98;
    --gray-dark: #383838;

    --red: #e51b23;

    --container: 1380px;

    --title: "Barlow Condensed", sans-serif;
    --body: "Inter", sans-serif;

    --ease: cubic-bezier(.22,1,.36,1);

}


/* =========================================================
   RESET
========================================================= */

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


html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}


body {
    background: var(--black);
    color: var(--white);
    font-family: var(--body);
    overflow-x: hidden;
    width: 100%;
}


body.menu-open {
    overflow: hidden;
}


img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


a {
    color: inherit;
    text-decoration: none;
}


button {
    font-family: inherit;
}


main,
section,
footer,
header {
    max-width: 100%;
}


/* =========================================================
   CONTAINER
========================================================= */

.container {
    width: min(1380px, calc(100% - 80px));
    margin-inline: auto;
}


/* =========================================================
   CURSOR
========================================================= */

.cursor,
.cursor-follower {
    position: fixed;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 9999;
}


.cursor {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
}


.cursor-follower {
    width: 35px;
    height: 35px;
    border: 1px solid rgba(229,27,35,.6);
    border-radius: 50%;
    z-index: 9998;
    transition:
        width .3s var(--ease),
        height .3s var(--ease);
}


.cursor-hover .cursor-follower {
    width: 60px;
    height: 60px;
}


/* =========================================================
   HEADER
========================================================= */

.header {
    position: fixed;
    inset: 0 0 auto;
    width: 100%;
    height: 90px;
    padding-inline: 40px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    z-index: 1000;

    transition:
        height .35s ease,
        background .35s ease,
        border-color .35s ease;
}


.header.scrolled {
    height: 70px;
    background: rgba(7,7,7,.94);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255,255,255,.08);
}


/* =========================================================
   BRAND
========================================================= */

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}


.brand-shield {
    width: 38px;
    height: 48px;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            90deg,
            var(--red) 0 33%,
            white 33% 66%,
            var(--red) 66%
        );

    clip-path:
        polygon(
            0 0,
            100% 0,
            100% 72%,
            50% 100%,
            0 72%
        );

    color: white;
    font-family: var(--title);
    font-size: 15px;
    font-weight: 900;
}


.brand-text {
    display: flex;
    flex-direction: column;
    font-family: var(--title);
    line-height: .75;
}


.brand-text strong {
    font-size: 20px;
}


.brand-text span {
    color: var(--red);
    font-size: 16px;
    font-weight: 700;
}


/* =========================================================
   DESKTOP NAV
========================================================= */

.desktop-nav {
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 40px);
}


.desktop-nav a {
    position: relative;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    white-space: nowrap;
}


.desktop-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 1px;
    background: var(--red);
    transition: width .3s ease;
}


.desktop-nav a:hover::after {
    width: 100%;
}


/* =========================================================
   HEADER BUTTON
========================================================= */

.header-button {
    padding: 13px 18px;
    border: 1px solid rgba(255,255,255,.3);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    white-space: nowrap;

    transition: .3s ease;
}


.header-button span {
    color: var(--red);
    margin-left: 10px;
}


.header-button:hover {
    color: white;
    background: var(--red);
    border-color: var(--red);
}


.header-button:hover span {
    color: white;
}


/* =========================================================
   MOBILE BUTTON
========================================================= */

.menu-button {
    display: none;

    width: 42px;
    height: 42px;

    padding: 0;
    border: 0;
    background: transparent;

    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 7px;

    cursor: pointer;
}


.menu-button span {
    width: 27px;
    height: 1px;
    background: white;
    transition: .3s ease;
}


.menu-button.active span:first-child {
    transform: translateY(4px) rotate(45deg);
}


.menu-button.active span:last-child {
    transform: translateY(-4px) rotate(-45deg);
}


/* =========================================================
   MOBILE MENU
========================================================= */

.mobile-menu {
    position: fixed;
    inset: 0;

    z-index: 900;

    background: var(--black);

    transform: translateY(-100%);
    transition: transform .65s var(--ease);

    overflow-y: auto;
}


.mobile-menu.active {
    transform: translateY(0);
}


.mobile-menu-inner {
    min-height: 100%;
    min-height: 100dvh;

    padding:
        max(105px, env(safe-area-inset-top) + 90px)
        25px
        max(30px, env(safe-area-inset-bottom));

    display: flex;
    flex-direction: column;
}


.mobile-menu-top {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    color: var(--gray);

    font-size: 8px;
    letter-spacing: 2px;

    margin-bottom: 45px;
}


.mobile-menu nav {
    display: flex;
    flex-direction: column;
}


.mobile-menu nav a {
    font-family: var(--title);
    font-size: clamp(42px, 13vw, 62px);
    line-height: .9;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 15px;
}


.mobile-menu nav a:hover {
    color: var(--red);
}


.mobile-social {
    margin-top: auto;
    padding-top: 50px;

    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}


.mobile-social a {
    font-size: 8px;
    letter-spacing: 1px;
}


/* =========================================================
   HERO
========================================================= */

.hero {
    position: relative;

    min-height: 100vh;
    min-height: 100svh;

    display: flex;
    align-items: center;

    overflow: hidden;
}


.hero-image {
    position: absolute;
    inset: 0;
}


.hero-image img {
    filter:
        grayscale(.15)
        contrast(1.1)
        saturate(.8);

    animation:
        heroZoom 15s ease-out forwards;
}


@keyframes heroZoom {
    from {
        transform: scale(1.05);
    }

    to {
        transform: scale(1);
    }
}


.hero-dark {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.94) 0%,
            rgba(0,0,0,.8) 55%,
            rgba(0,0,0,.94) 100%
        )
}


.hero-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 100px 100px;

    opacity: .7;
}


.hero-sash {
    position: absolute;

    width: clamp(80px, 10vw, 170px);
    height: 160%;

    top: -30%;
    right: 12%;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(229,27,35,.95),
            transparent
        );

    transform: rotate(22deg);
    opacity: .5;
}


.hero-content {
    position: relative;
    z-index: 2;

    width: min(
        var(--container),
        calc(100% - 80px)
    );

    margin-inline: auto;

    padding-top: 90px;
}


.hero-kicker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;

    font-size: 9px;
    letter-spacing: 2px;
    color: rgba(255,255,255,.7);

    margin-bottom: 38px;
}


.live-dot {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background: var(--red);

    box-shadow:
        0 0 0 5px rgba(229,27,35,.15);
}


.hero h1 {
    max-width: 1100px;

    font-family: var(--title);

    font-size:
        clamp(
            72px,
            13.5vw,
            205px
        );

    line-height: .72;
    letter-spacing: -.045em;
    font-weight: 900;
}


.hero h1 span {
    display: block;
    color: var(--red);
}


.hero-description {
    width: min(470px, 100%);

    margin-top: 48px;

    color: rgba(255,255,255,.7);

    font-size: 14px;
    line-height: 1.8;
}


.hero-description strong {
    color: white;
}


.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 32px;
}


.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    min-height: 50px;

    padding: 15px 21px;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;

    transition:
        transform .3s var(--ease),
        background .3s ease,
        color .3s ease;
}


.btn span {
    font-size: 16px;
}


.btn-red {
    color: white;
    background: var(--red);
}


.btn-red:hover {
    transform: translateY(-3px);
    background: #ff2931;
}


.btn-outline {
    border: 1px solid rgba(255,255,255,.35);
}


.btn-outline:hover {
    background: white;
    color: black;
}


.hero-bottom {
    position: absolute;

    left: 40px;
    right: 40px;
    bottom: 30px;

    z-index: 3;

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 30px;

    font-size: 8px;
    letter-spacing: 2px;

    color: var(--gray);
}


.hero-scroll {
    display: flex;
    align-items: center;
    gap: 20px;
}


.scroll-line {
    width: 100px;
    height: 1px;
    background: rgba(255,255,255,.3);
}


.hero-location {
    display: flex;
    align-items: center;
    gap: 15px;
}


.hero-location strong {
    color: var(--red);
    font-size: 18px;
}


/* =========================================================
   SECTIONS
========================================================= */

.section {
    padding-block: clamp(90px, 11vw, 150px);
}


.section-label {
    display: flex;
    align-items: center;
    gap: 17px;

    font-size: 9px;
    letter-spacing: 2px;

    color: var(--gray);
}


.section-label span {
    color: var(--red);
}


/* =========================================================
   INTRO
========================================================= */

.intro {
    background: var(--black-2);
}


.intro-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(280px, .7fr);

    gap: clamp(50px, 8vw, 100px);

    margin-top: 75px;
}


.intro-title h2 {
    font-family: var(--title);

    font-size:
        clamp(
            62px,
            9vw,
            140px
        );

    line-height: .77;
    letter-spacing: -.035em;
}


.intro-title h2 span {
    color: var(--gray-dark);
}


.intro-title h2 strong {
    color: var(--red);
}


.intro-copy {
    align-self: end;
    max-width: 390px;
}


.intro-copy p {
    color: var(--gray);
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 20px;
}


.text-link {
    display: inline-flex;
    align-items: center;
    gap: 20px;

    border-bottom: 1px solid rgba(255,255,255,.25);

    padding-bottom: 10px;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;

    margin-top: 15px;
}


.text-link span {
    color: var(--red);
}


/* =========================================================
   MANIFESTO
========================================================= */

.manifesto {
    min-height: 90vh;
    min-height: 90svh;

    position: relative;

    display: flex;
    align-items: center;

    overflow: hidden;
}


.manifesto-image {
    position: absolute;
    inset: 0;
}


.manifesto-image img {
    filter:
        grayscale(.7)
        contrast(1.15);
}


.manifesto-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.93),
            rgba(0,0,0,.35)
        );
}


.manifesto-container {
    position: relative;
    z-index: 2;
}


.manifesto-content {
    max-width: 800px;
}


.manifesto-content > span {
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--red);
}


.manifesto-content h2 {
    font-family: var(--title);

    font-size:
        clamp(
            82px,
            13vw,
            200px
        );

    line-height: .76;
    letter-spacing: -.04em;

    margin-block: 30px 40px;
}


.manifesto-content h2 em {
    color: var(--red);
    font-style: normal;
}


.manifesto-content p {
    width: min(400px, 100%);

    color: rgba(255,255,255,.65);

    font-size: 14px;
    line-height: 1.8;
}


/* =========================================================
   TEAM
========================================================= */

.team {
    background: var(--black);
}


.team-header {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(250px,350px);

    gap: 60px;

    align-items: end;
}


.team-header h2 {
    font-family: var(--title);

    font-size:
        clamp(
            68px,
            9vw,
            140px
        );

    line-height: .75;

    margin-top: 35px;
}


.team-header h2 em {
    color: var(--red);
    font-style: normal;
}


.team-header > p {
    color: var(--gray);

    font-size: 13px;
    line-height: 1.8;
}


/* =========================================================
   FILTERS
========================================================= */

.team-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-block: 65px 30px;
}


.team-filter {
    padding: 10px 17px;

    border: 1px solid rgba(255,255,255,.15);

    background: transparent;

    color: var(--gray);

    font-size: 8px;
    letter-spacing: 1px;

    cursor: pointer;

    transition: .3s ease;
}


.team-filter:hover,
.team-filter.active {
    color: white;
    background: var(--red);
    border-color: var(--red);
}


/* =========================================================
   PLAYERS
========================================================= */

.team-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 15px;
}


.player-card {
    min-width: 0;
    cursor: pointer;
}


.player-image {
    position: relative;

    width: 100%;
    aspect-ratio: .72;

    overflow: hidden;

    background: #181818;
}


.player-image img {
    transition: transform .8s var(--ease);

    filter:
        saturate(.8)
        contrast(1.05);
}


.player-card:hover .player-image img {
    transform: scale(1.06);
}


.player-sash {
    position: absolute;

    width: 30px;
    height: 150%;

    top: -20%;
    right: 18%;

    background: var(--red);

    opacity: .5;

    transform: rotate(25deg);
}


.player-number {
    position: absolute;

    top: 15px;
    left: 15px;

    font-family: var(--title);
    font-size: 35px;
    font-weight: 800;
}


.player-hover {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

    background: rgba(229,27,35,.9);

    opacity: 0;

    transition: opacity .4s ease;
}


.player-card:hover .player-hover {
    opacity: 1;
}


.player-hover span {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}


.player-hover strong {
    font-size: 25px;
}


.player-info {
    min-width: 0;

    display: flex;
    justify-content: space-between;
    gap: 15px;

    padding-block: 15px 35px;
}


.player-info small {
    display: block;

    color: var(--gray);

    font-size: 7px;
    letter-spacing: 1.5px;

    margin-bottom: 5px;
}


.player-info h3,
.player-info > div > strong {
    font-family: var(--title);
    font-size: clamp(24px, 2.1vw, 29px);
    line-height: .8;
}


.player-info > div > strong {
    display: block;
    color: var(--red);
}


.player-arrow {
    flex-shrink: 0;
    color: var(--red);
    font-size: 22px;
}


.team-more {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    margin-top: 30px;
    padding-top: 20px;

    border-top: 1px solid rgba(255,255,255,.1);

    color: var(--gray);

    font-size: 8px;
    letter-spacing: 1.5px;
}


/* =========================================================
   NUMBERS
========================================================= */

.numbers {
    padding-block: 90px;

    background: var(--red);

    overflow: hidden;
}


.numbers-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0,1fr));
}


.number {
    min-width: 0;

    padding-left: 40px;

    border-right:
        1px solid
        rgba(255,255,255,.3);
}


.number:first-child {
    padding-left: 0;
}


.number:last-child {
    border-right: 0;
}


.number strong {
    display: block;

    font-family: var(--title);

    font-size:
        clamp(
            70px,
            7vw,
            105px
        );

    line-height: .75;
}


.number span {
    display: block;

    margin-top: 20px;

    font-size: 8px;
    letter-spacing: 1.5px;

    opacity: .75;
}


/* =========================================================
   JOURNEY
========================================================= */

.journey {
    background: var(--black-2);
}


.journey-title {
    margin-block: 70px 100px;
}


.journey-title h2 {
    font-family: var(--title);

    font-size:
        clamp(
            80px,
            13vw,
            200px
        );

    line-height: .7;
    letter-spacing: -.04em;
}


.journey-title h2 em {
    color: var(--red);
    font-style: normal;
}


.journey-route {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    margin-bottom: 100px;
}


.route-line {
    position: absolute;

    left: 0;
    right: 0;
    top: 6px;

    height: 1px;

    background:
        rgba(255,255,255,.2);
}


.route-point {
    position: relative;

    min-width: 0;

    padding-top: 35px;
    padding-right: 40px;
}


.route-dot {
    position: absolute;

    top: 0;
    left: 0;

    width: 13px;
    height: 13px;

    border-radius: 50%;

    background: var(--gray-dark);

    border: 4px solid var(--black-2);
}


.route-point.active .route-dot {
    background: var(--red);
}


.route-point > span {
    color: var(--gray);
    font-size: 8px;
}


.route-point h3 {
    font-family: var(--title);
    font-size: clamp(30px, 3vw, 40px);
    margin-top: 12px;
}


.route-point p {
    width: min(180px,100%);

    color: var(--gray);

    font-size: 11px;
    line-height: 1.6;

    margin-top: 5px;
}


.journey-image {
    position: relative;

    height: clamp(350px, 40vw, 550px);

    overflow: hidden;
}


.journey-caption {
    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 25px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;

    font-size: 9px;
    letter-spacing: 1.5px;
}


.journey-caption span {
    color: var(--red);
}


.journey-caption strong {
    font-family: var(--title);
    font-size: clamp(22px, 3vw, 30px);
}


/* =========================================================
   MATCH
========================================================= */

.match {
    position: relative;

    min-height: 90vh;
    min-height: 90svh;

    display: flex;
    align-items: center;

    overflow: hidden;
}


.match-background {
    position: absolute;
    inset: 0;
}


.match-background img {
    filter:
        grayscale(.5)
        contrast(1.2);
}


.match-overlay {
    position: absolute;
    inset: 0;

    background: rgba(0,0,0,.78);
}


.match-container {
    position: relative;
    z-index: 2;
}


.match-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
}


.match-status {
    display: flex;
    align-items: center;
    gap: 10px;

    font-size: 8px;
    letter-spacing: 2px;
}


.match-status span {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;
    background: var(--red);
}


.match-card {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(120px,.5fr)
        minmax(0,1fr);

    align-items: center;

    gap: 20px;

    margin-top: 75px;

    padding-block: 60px;

    border-top:
        1px solid
        rgba(255,255,255,.2);

    border-bottom:
        1px solid
        rgba(255,255,255,.2);
}


.match-team {
    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    min-width: 0;
}


.country-flag {
    font-size: 60px;
    line-height: 1;
    margin-bottom: 15px;
}


.match-team strong {
    font-family: var(--title);

    font-size:
        clamp(50px, 6vw, 75px);

    line-height: .8;
}


.match-team span {
    color: var(--gray);

    font-size: 7px;
    letter-spacing: 2px;

    margin-top: 10px;
}


.match-center {
    min-width: 0;
    text-align: center;
}


.match-center small {
    color: var(--red);

    font-size: 8px;
    letter-spacing: 2px;
}


.match-center > strong {
    display: block;

    font-family: var(--title);

    font-size:
        clamp(60px, 7vw, 90px);

    line-height: .8;

    margin-block: 15px;
}


.match-date {
    font-size: 9px;
    letter-spacing: 2px;
}


.match-date span {
    color: var(--red);
}


.match-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 25px;

    margin-top: 25px;
}


.match-bottom > span {
    color: var(--gray);

    font-size: 8px;
    letter-spacing: 2px;
}


/* =========================================================
   CONTENT
========================================================= */

.content {
    background: var(--black);
}


.content-header h2 {
    width: min(1000px,100%);

    font-family: var(--title);

    font-size:
        clamp(
            65px,
            9vw,
            150px
        );

    line-height: .75;

    margin-top: 65px;
}


.content-header h2 em {
    color: var(--red);
    font-style: normal;
}


.content-grid {
    display: grid;

    grid-template-columns:
        minmax(0,1.4fr)
        minmax(0,1fr);

    gap: 20px;

    margin-top: 75px;
}


.content-card {
    min-width: 0;
}


.content-card.large {
    grid-row: span 2;
}


.content-image {
    height: 300px;
    overflow: hidden;
}


.content-card.large .content-image {
    height: 620px;
}


.content-image img {
    transition: transform .8s var(--ease);
}


.content-card:hover .content-image img {
    transform: scale(1.05);
}


.content-info {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        30px;

    gap: 20px;

    padding-block: 15px 35px;
}


.content-info small {
    grid-column: 1 / -1;

    color: var(--gray);

    font-size: 7px;
    letter-spacing: 2px;
}


.content-info h3 {
    font-family: var(--title);

    font-size:
        clamp(27px,3vw,35px);

    line-height: .85;
}


.content-info span {
    color: var(--red);
    font-size: 22px;
}


/* =========================================================
   PARTNERS
========================================================= */

.partners {
    background: var(--black-2);
}


.partners-header h2 {
    width: min(1100px,100%);

    font-family: var(--title);

    font-size:
        clamp(
            65px,
            9vw,
            140px
        );

    line-height: .75;

    margin-top: 65px;
}


.partners-header h2 em {
    color: var(--red);
    font-style: normal;
}


.partners-grid {
    display: grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    margin-top: 75px;

    border-top: 1px solid rgba(255,255,255,.1);
    border-left: 1px solid rgba(255,255,255,.1);
}


.partner {
    min-width: 0;
    height: 190px;

    border-right: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(255,255,255,.1);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    font-family: var(--title);

    font-size:
        clamp(32px,4vw,45px);

    color: #555;

    transition: .3s ease;
}


.partner:hover {
    color: white;
    background: rgba(229,27,35,.05);
}


.partner-cta {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 30px;

    margin-top: 55px;
}


.partner-cta p {
    width: min(350px,100%);

    color: var(--gray);

    font-size: 13px;
    line-height: 1.7;
}


.btn-white {
    color: black;
    background: white;
}


.btn-white:hover {
    color: white;
    background: var(--red);
}


/* =========================================================
   FINAL CTA
========================================================= */

.final-cta {
    position: relative;

    min-height: 85vh;
    min-height: 85svh;

    display: flex;
    align-items: center;

    background: white;
    color: black;

    overflow: hidden;
}


.final-sash {
    position: absolute;

    width: clamp(160px,20vw,300px);
    height: 180%;

    top: -40%;
    right: 10%;

    background: var(--red);

    transform: rotate(25deg);

    opacity: .95;
}


.final-content {
    position: relative;
    z-index: 2;

    width: min(1000px,100%);
}


.final-content > span {
    font-size: 10px;
    letter-spacing: 2px;
}


.final-content h2 {
    font-family: var(--title);

    font-size:
        clamp(
            85px,
            14vw,
            230px
        );

    line-height: .77;

    letter-spacing: -.045em;

    margin-top: 35px;
}


.final-content h2 em {
    color: var(--red);
    font-style: normal;
}


.final-content p {
    width: min(450px,100%);

    font-size: 14px;
    line-height: 1.7;

    margin-block: 45px 30px;
}


.final-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}


.btn-black {
    color: white;
    background: black;
}


.btn-black:hover {
    background: var(--red);
}


.btn-final-outline {
    border: 1px solid rgba(0,0,0,.3);
}


.btn-final-outline:hover {
    color: white;
    background: black;
}


/* =========================================================
   FOOTER
========================================================= */

.footer {
    background: var(--black);
    padding-block: 85px 30px;
}


.footer-top {
    display: flex;
    justify-content: space-between;
    gap: 70px;
}


.footer-brand {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}


.footer-shield {
    width: 55px;
    height: 65px;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            90deg,
            var(--red) 0 33%,
            white 33% 66%,
            var(--red) 66%
        );

    clip-path:
        polygon(
            0 0,
            100% 0,
            100% 72%,
            50% 100%,
            0 72%
        );

    color: black;

    font-family: var(--title);
    font-size: 20px;
    font-weight: 900;
}


.footer-brand > div:last-child {
    display: flex;
    flex-direction: column;

    font-family: var(--title);
    line-height: .8;
}


.footer-brand strong {
    font-size: 32px;
}


.footer-brand span {
    color: var(--red);
    font-size: 25px;
    font-weight: 800;
}


.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(40px,7vw,100px);
}


.footer-links div {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


.footer-links span {
    color: var(--gray);
    font-size: 7px;
    letter-spacing: 2px;
    margin-bottom: 8px;
}


.footer-links a {
    font-size: 10px;
}


.footer-links a:hover {
    color: var(--red);
}


.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    margin-top: 75px;
    padding-top: 25px;

    border-top: 1px solid rgba(255,255,255,.1);

    color: var(--gray);

    font-size: 7px;
    letter-spacing: 1.5px;
}


/* =========================================================
   MODAL
========================================================= */

.player-modal {
    position: fixed;
    inset: 0;

    z-index: 2000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        max(20px, env(safe-area-inset-top))
        max(20px, env(safe-area-inset-right))
        max(20px, env(safe-area-inset-bottom))
        max(20px, env(safe-area-inset-left));

    opacity: 0;
    pointer-events: none;

    transition: opacity .4s ease;
}


.player-modal.active {
    opacity: 1;
    pointer-events: auto;
}


.modal-background {
    position: absolute;
    inset: 0;

    background: rgba(0,0,0,.9);

    backdrop-filter: blur(10px);
}


.modal-box {
    position: relative;
    z-index: 2;

    width: min(950px,100%);

    max-height: min(850px,90dvh);

    display: grid;

    grid-template-columns:
        minmax(0,.8fr)
        minmax(0,1fr);

    background: #111;

    overflow: auto;

    transform: translateY(30px);

    transition:
        transform .5s var(--ease);
}


.player-modal.active .modal-box {
    transform: translateY(0);
}


.modal-photo {
    min-height: 500px;
}


.modal-details {
    min-width: 0;

    padding: clamp(30px,5vw,60px);

    display: flex;
    flex-direction: column;
    justify-content: center;
}


.modal-details > span {
    color: var(--red);

    font-size: 8px;
    letter-spacing: 2px;
}


.modal-details h2 {
    font-family: var(--title);

    font-size:
        clamp(65px,8vw,95px);

    line-height: .75;

    margin-block: 20px;
}


.modal-details p {
    color: var(--gray);

    font-size: 12px;
    line-height: 1.7;
}


.modal-stats {
    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap: 15px;

    margin-block: 35px;
}


.modal-stats div {
    min-width: 0;

    border-top:
        1px solid
        rgba(255,255,255,.15);

    padding-top: 10px;
}


.modal-stats strong {
    display: block;

    font-family: var(--title);

    font-size: 30px;
}


.modal-stats span {
    color: var(--gray);

    font-size: 7px;
    letter-spacing: 1px;
}


.modal-social {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}


.modal-social a {
    font-size: 8px;

    border-bottom:
        1px solid
        rgba(255,255,255,.2);

    padding-bottom: 8px;
}


.modal-close {
    position: absolute;

    top: 12px;
    right: 12px;

    z-index: 5;

    width: 40px;
    height: 40px;

    border: 0;

    background: rgba(0,0,0,.7);

    color: white;

    font-size: 25px;

    cursor: pointer;
}


/* =========================================================
   FLOATING BUTTON
========================================================= */

.floating-button {
    position: fixed;

    right: max(15px, env(safe-area-inset-right));
    bottom: max(15px, env(safe-area-inset-bottom));

    z-index: 800;

    width: 0px;
    height: 0px;

    border-radius: 50%;

    display: grid;
    place-items: center;

    background: var(--red);
    color: white;

    text-align: center;

    box-shadow:
        0 10px 30px rgba(0,0,0,.25);

    transition: transform .3s ease;
}


.floating-button span {
    font-size: 7px;
    font-weight: 800;
    line-height: 1.1;
}


.floating-button strong {
    display: none;
}


.floating-button:hover {
    transform: scale(1.1);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .desktop-nav,
    .header-button {
        display: none;
    }


    .menu-button {
        display: flex;
    }


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


    .partners-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));

        margin-top: 75px;

        border-top: 1px solid rgba(255,255,255,.10);
        border-left: 1px solid rgba(255,255,255,.10);
    }


    .footer-top {
        flex-direction: column;
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {

    .container {
        width:
            min(
                100% - 48px,
                var(--container)
            );
    }


    .hero-content {
        width:
            calc(100% - 48px);
    }


    .hero h1 {
        font-size:
            clamp(
                70px,
                14vw,
                130px
            );
    }


    .intro-grid,
    .team-header {
        grid-template-columns: 1fr;
    }


    .intro-copy {
        max-width: 500px;
    }


    .journey-route {
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:
            60px 30px;
    }


    .route-line {
        display: none;
    }


    .route-point {
        padding-top: 35px;
    }


    .match-card {
        padding-block: 45px;
    }


    .content-grid {
        grid-template-columns:
            1fr;
    }


    .content-card.large {
        grid-row: auto;
    }


    .content-card.large .content-image,
    .content-image {
        height: 420px;
    }


    .modal-box {
        width: min(800px,100%);
    }

}


/* =========================================================
   MOBILE LARGE
========================================================= */

@media (max-width: 700px) {

    .container {
        width:
            calc(100% - 36px);
    }


    .header {
        height: 72px;
        padding-inline: 18px;
    }


    .header.scrolled {
        height: 65px;
    }


    .brand-shield {
        width: 30px;
        height: 38px;
    }


    .brand-text strong {
        font-size: 16px;
    }


    .brand-text span {
        font-size: 13px;
    }


    .hero {
        min-height:
            100svh;
    }


    .hero-content {
        width:
            calc(100% - 36px);

        padding-top: 60px;
    }


    .hero-kicker {
        max-width: 320px;
        font-size: 7px;
        line-height: 1.5;
    }


    .hero h1 {
        font-size:
            clamp(
                66px,
                20vw,
                115px
            );

        line-height: .74;
        letter-spacing: -.035em;
    }


    .hero-description {
        margin-top: 35px;
        font-size: 12px;
        line-height: 1.7;
    }


    .hero-buttons {
        width: 100%;
        margin-top: 28px;
    }


    .btn {
        width: auto;
        max-width: 100%;
    }


    .hero-bottom {
        left: 18px;
        right: 18px;
        bottom: 20px;
    }


    .hero-location {
        display: none;
    }


    .scroll-line {
        width: 65px;
    }


    .section {
        padding-block:
            85px;
    }


    .section-label {
        font-size: 8px;
    }


    .intro-grid {
        margin-top: 50px;
    }


    .intro-title h2 {
        font-size:
            clamp(
                58px,
                18vw,
                95px
            );
    }


    .manifesto {
        min-height:
            75svh;
    }


    .manifesto-content h2 {
        font-size:
            clamp(
                75px,
                20vw,
                120px
            );

        margin-block: 25px 30px;
    }


    .team-header h2 {
        font-size:
            clamp(
                62px,
                18vw,
                100px
            );
    }


    .team-filters {
        margin-block:
            50px 25px;
    }


    .team-filter {
        padding:
            9px 11px;

        font-size: 7px;
    }


    .team-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap: 10px;
    }


    .player-image {
        aspect-ratio:
            .72;
    }


    .player-number {
        top: 10px;
        left: 10px;
        font-size: 28px;
    }


    .player-info {
        padding-block:
            12px 25px;
    }


    .player-info small {
        font-size: 6px;
    }


    .player-info h3,
    .player-info > div > strong {
        font-size: 23px;
    }


    .player-arrow {
        font-size: 18px;
    }


    .team-more {
        font-size: 7px;
    }


    .numbers {
        padding-block: 75px;
    }


    .numbers-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:
            35px 25px;
    }


    .number {
        padding:
            0 0 25px;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(255,255,255,.3);
    }


    .number:nth-child(3),
    .number:nth-child(4) {
        border-bottom: 0;
    }


    .number strong {
        font-size:
            clamp(65px,18vw,90px);
    }


    .number span {
        font-size: 7px;
    }


    .journey-title {
        margin-block:
            55px 70px;
    }


    .journey-title h2 {
        font-size:
            clamp(
                72px,
                21vw,
                130px
            );
    }


    .journey-route {
        grid-template-columns: 1fr;
        gap: 35px;
        margin-bottom: 65px;
    }


    .route-point {
        padding:
            0 0 0 35px;
    }


    .route-point::before {
        content: "";
        position: absolute;

        left: 6px;
        top: 13px;
        bottom: -35px;

        width: 1px;

        background:
            rgba(255,255,255,.15);
    }


    .route-point:last-child::before {
        display: none;
    }


    .route-dot {
        top: 3px;
    }


    .route-point h3 {
        font-size: 34px;
        margin-top: 6px;
    }


    .journey-image {
        height: 350px;
    }


    .journey-caption {
        left: 18px;
        right: 18px;
        bottom: 18px;

        align-items: flex-start;
        flex-direction: column;

        gap: 7px;
    }


    .journey-caption strong {
        font-size: 24px;
    }


    .match {
        min-height:
            auto;

        padding-block:
            90px;
    }


    .match-top {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap: 20px;
    }


    .match-card {
        grid-template-columns:
            1fr;

        gap: 35px;

        margin-top: 50px;

        padding-block: 45px;
    }


    .match-center {
        order: 2;
    }


    .match-team strong {
        font-size:
            clamp(55px,16vw,75px);
    }


    .match-center > strong {
        font-size: 70px;
    }


    .match-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
    }


    .content-header h2 {
        margin-top: 50px;

        font-size:
            clamp(
                58px,
                18vw,
                100px
            );
    }


    .content-grid {
        margin-top: 55px;
    }


    .content-card.large .content-image,
    .content-image {
        height: 330px;
    }


    .content-info h3 {
        font-size: 28px;
    }


    .partners-header h2 {
        margin-top: 50px;

        font-size:
            clamp(
                58px,
                18vw,
                100px
            );
    }


    .partners-grid {
        margin-top: 55px;
    }


   .partner {
        min-width: 0;
        height: 190px;

        padding: 30px;

        display: flex;
        align-items: center;
        justify-content: center;

        border-right: 1px solid rgba(255,255,255,.10);
        border-bottom: 1px solid rgba(255,255,255,.10);

        background: transparent;

        transition:
            background .35s ease;
    }


    .partner img {
        display: block;

        width: auto;
        height: auto;

        max-width: 180px;
        max-height: 75px;

        object-fit: contain;

        /* Todos comienzan neutros */
        filter:
            grayscale(100%)
            brightness(0)
            invert(1);

        opacity: .58;

        transition:
            filter .35s ease,
            opacity .35s ease,
            transform .35s cubic-bezier(.22,1,.36,1);
    }


    .partner-cta {
        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .final-cta {
        min-height:
            75svh;

        padding-block:
            90px;
    }


    .final-content h2 {
        font-size:
            clamp(
                75px,
                22vw,
                130px
            );

        letter-spacing:
            -.035em;
    }


    .final-content p {
        margin-block:
            35px 28px;
    }


    .final-buttons {
        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .final-buttons .btn {
        width:
            auto;
    }


    .final-sash {
        width: 130px;
        right: -35%;
        opacity: .25;
    }


    .footer {
        padding-block:
            70px 25px;
    }


    .footer-links {
        gap: 35px;
    }


    .footer-bottom {
        flex-direction:
            column;

        align-items:
            flex-start;

        margin-top:
            55px;
    }


    .floating-button {
        width: 56px;
        height: 56px;
    }


    .modal-box {
        width: 100%;
        max-height:
            calc(100dvh - 30px);

        grid-template-columns:
            1fr;
    }


    .modal-photo {
        min-height:
            280px;

        height:
            42dvh;

        max-height:
            380px;
    }


    .modal-details {
        padding:
            30px 24px 35px;
    }


    .modal-details h2 {
        font-size:
            clamp(60px,18vw,80px);
    }


    .modal-stats {
        margin-block:
            30px;
    }


    .modal-social {
        gap: 12px;
    }

}


/* =========================================================
   MOBILE SMALL
========================================================= */

@media (max-width: 480px) {

    .container {
        width:
            calc(100% - 28px);
    }


    .header {
        padding-inline:
            14px;
    }


    .hero-content {
        width:
            calc(100% - 28px);

        padding-top:
            45px;
    }


    .hero h1 {
        font-size:
            clamp(
                61px,
                20.5vw,
                92px
            );
    }


    .hero-description {
        width:
            min(330px,100%);

        font-size:
            11px;
    }


    .btn {
        min-height:
            47px;

        padding:
            14px 17px;

        font-size:
            8px;
    }


    .team-grid {
        grid-template-columns:
            1fr 1fr;
    }


    .player-info h3,
    .player-info > div > strong {
        font-size:
            clamp(20px,7vw,25px);
    }


    .player-arrow {
        display:
            none;
    }


    .player-hover {
        display:
            none;
    }


    .numbers-grid {
        gap:
            25px 15px;
    }


    .number strong {
        font-size:
            clamp(58px,19vw,78px);
    }


    .number span {
        max-width:
            100px;
    }


    .journey-image {
        height:
            300px;
    }


    .match-team strong {
        font-size:
            58px;
    }


    .match-center > strong {
        font-size:
            60px;
    }


    .country-flag {
        font-size:
            50px;
    }


    .content-card.large .content-image,
    .content-image {
        height:
            280px;
    }


    .partners-grid {
        grid-template-columns:
            1fr 1fr;
    }


    .partner {
        height:
            120px;

        font-size:
            27px;
    }


    .footer-links {
        display:
            grid;

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        width:
            100%;
    }


    .footer-brand strong {
        font-size:
            27px;
    }


    .footer-brand span {
        font-size:
            21px;
    }


    .footer-bottom {
        font-size:
            6px;
    }

}


/* =========================================================
   EXTRA SMALL PHONES
========================================================= */

@media (max-width: 360px) {

    .brand-text {
        display:
            none;
    }


    .hero h1 {
        font-size:
            57px;
    }


    .hero-kicker {
        font-size:
            6px;
    }


    .hero-buttons .btn {
        width:
            100%;
    }


    .team-grid {
        grid-template-columns:
            1fr;
    }


    .player-image {
        aspect-ratio:
            .85;
    }


    .partners-grid {
        grid-template-columns:
            1fr;
    }


    .partner {
        height:
            105px;
    }

}


/* =========================================================
   REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior:
            auto;
    }


    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }

}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover: none) {

    .cursor,
    .cursor-follower {
        display:
            none;
    }


    .player-hover {
        display:
            none;
    }


    .player-card:hover
    .player-image img {

        transform:
            none;

    }


    .content-card:hover
    .content-image img {

        transform:
            none;

    }

}




/* =========================================================
   OVERRIDES — CONVOCADOS + VIDEO POPUP
   Añadir AL FINAL de css/style.css
========================================================= */

.team-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
}
.player-card{position:relative;min-width:0;}
.player-card::before{
    content:"";
    position:absolute;
    left:0;top:0;width:3px;height:0;
    background:#ed1c24;z-index:10;
    transition:height .45s cubic-bezier(.22,1,.36,1);
}
.player-card:hover::before{height:100%;}
.player-open{
    display:block;width:100%;padding:0;border:0;
    background:transparent;color:#fff;text-align:left;cursor:pointer;
}
.player-image{
    position:relative;aspect-ratio:.72;overflow:hidden;background:#151515;
}
.player-image::after{
    content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.92));
}
.player-image img{
    width:100%;height:100%;object-fit:cover;
    transition:transform .8s cubic-bezier(.22,1,.36,1);
}
.player-open:hover .player-image img{transform:scale(1.06);}
.player-number{
    position:absolute;left:14px;top:14px;z-index:3;
    font-family:"Barlow Condensed",sans-serif;font-size:62px;
    line-height:.8;font-weight:900;
}
.player-hover{
    position:absolute;inset:0;z-index:4;display:flex;
    align-items:center;justify-content:center;gap:12px;
    background:rgba(237,28,36,.90);opacity:0;transition:.3s;
    font-size:9px;font-weight:800;letter-spacing:1px;
}
.player-open:hover .player-hover{opacity:1;}
.player-hover strong{font-size:20px;}
.player-info{
    position:relative;z-index:5;margin-top:-72px;
    min-height:118px;padding:15px 15px 22px;
    display:flex;justify-content:space-between;
    background:linear-gradient(180deg,transparent,rgba(0,0,0,.98) 28%);
}
.player-info small{display:block;margin-bottom:7px;color:#fff;opacity:.7;font-size:7px;letter-spacing:1.5px;}
.player-info h3,.player-info>div>strong{
    display:block;margin:0;font-family:"Barlow Condensed",sans-serif;
    font-size:31px;line-height:.78;font-weight:800;
}
.player-info>div>strong{color:#ed1c24;}
.player-arrow{color:#ed1c24;font-size:20px;}
.player-meta{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:7px;letter-spacing:1px;color:#aaa;}
.player-meta span{padding:4px 6px;border:1px solid rgba(255,255,255,.25);color:#fff;}
.player-meta b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px;}
.team-more{display:flex;justify-content:space-between;margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-size:7px;letter-spacing:1.5px;color:#888;}
.team-more span:first-child{color:#ed1c24;}

/* Journey image becomes an actual video CTA */
.journey-video-trigger{
    width:100%;border:0;padding:0;display:block;position:relative;
    overflow:hidden;background:#111;color:#fff;cursor:pointer;text-align:left;
}
.journey-video-trigger>img{
    width:100%;height:100%;object-fit:cover;
    transition:transform .9s cubic-bezier(.22,1,.36,1);
}
.journey-video-trigger:hover>img{transform:scale(1.04);}
.journey-video-overlay{
    position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.82));
}
.journey-video-top{
    position:absolute;top:25px;left:30px;right:30px;
    display:flex;justify-content:space-between;
    font-size:8px;letter-spacing:2px;z-index:3;
}
.journey-play{
    position:absolute;left:50%;top:50%;z-index:3;
    width:92px;height:92px;border-radius:50%;
    display:grid;place-items:center;background:#ed1c24;
    transform:translate(-50%,-50%);
    transition:.35s cubic-bezier(.22,1,.36,1);
}
.journey-play span{font-size:21px;margin-left:4px;}
.journey-video-trigger:hover .journey-play{
    transform:translate(-50%,-50%) scale(1.1);
}
.journey-caption{
    position:absolute;left:30px;right:30px;bottom:25px;z-index:3;
    display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.journey-caption span{font-size:9px;color:#ed1c24;letter-spacing:1.5px;}
.journey-caption strong{font-family:"Barlow Condensed",sans-serif;font-size:30px;line-height:.9;}

/* Video modal */
.video-modal{
    position:fixed;inset:0;z-index:5000;display:flex;
    align-items:center;justify-content:center;padding:25px;
    opacity:0;visibility:hidden;pointer-events:none;transition:.35s;
}
.video-modal.active{opacity:1;visibility:visible;pointer-events:auto;}
.video-modal-background{
    position:absolute;inset:0;background:rgba(0,0,0,.95);
    backdrop-filter:blur(12px);
}
.video-modal-box{
    position:relative;z-index:2;width:min(1180px,100%);
    background:#000;transform:translateY(25px) scale(.98);
    transition:.45s cubic-bezier(.22,1,.36,1);
}
.video-modal.active .video-modal-box{transform:none;}
.video-container{width:100%;aspect-ratio:16/9;}
.video-container video{display:block;width:100%;height:100%;object-fit:contain;background:#000;}
.video-modal-close{
    position:absolute;right:0;top:-52px;width:42px;height:42px;
    border:1px solid rgba(255,255,255,.3);background:#090909;
    color:#fff;font-size:25px;cursor:pointer;z-index:5;
}
.modal-handle{
    margin-top:18px;color:#ed1c24;font-size:8px;
    letter-spacing:1.5px;text-transform:uppercase;
}

@media (max-width:1000px){
    .team-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:700px){
    .team-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
    .player-number{font-size:38px;left:9px;top:9px;}
    .player-info{margin-top:-63px;padding:12px 10px 18px;min-height:90px;}
    .player-info h3,.player-info>div>strong{font-size:23px;}
    .player-arrow,.player-hover{display:none;}
    .player-meta{font-size:6px;margin-top:7px;}
    .player-meta b{max-width:75px;}
    .journey-caption{left:18px;right:18px;bottom:18px;align-items:flex-start;flex-direction:column;gap:7px;}
    .journey-caption strong{font-size:25px;}
    .journey-play{width:72px;height:72px;}
    .video-modal{padding:12px;}
}
@media (max-width:380px){
    .team-grid{grid-template-columns:1fr;}
}


/* =================================================
   PARTNERS — 3 LOGOS RESPONSIVE
================================================== */

.partners-three {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    width: 100%;

    margin-top: 60px;

    border-top: 1px solid rgba(255,255,255,.10);
    border-left: 1px solid rgba(255,255,255,.10);
}


/* Cada bloque */

.partners-three .partner {

    width: 100%;

    min-width: 0;

    height: clamp(180px, 20vw, 280px);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: clamp(25px, 5vw, 70px);

    border-right:
        1px solid rgba(255,255,255,.10);

    border-bottom:
        1px solid rgba(255,255,255,.10);

    overflow: hidden;
}


/* Logos */

.partners-three .partner img {

    display: block;

    width: auto;

    height: auto;

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

    object-position: center;

    opacity: 1;

    transition:
        transform .4s ease,
        opacity .4s ease,
        filter .4s ease;
}


/* Hover */

.partners-three .partner:hover img {

    opacity: 1;

    filter: none;

    transform: scale(1.05);
}


/* =================================================
   TABLET
================================================== */

@media (max-width: 900px) {

    .partners-three {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        margin-top: 45px;
    }


    .partners-three .partner {

        height: 190px;

        padding: 30px;
    }

}


/* =================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

    .partners-three {

        grid-template-columns: 1fr;

        width: 100%;

        margin-top: 40px;
    }


    .partners-three .partner {

        width: 100%;

        height: 150px;

        padding:
            25px
            45px;
    }


    .partners-three .partner img {

        max-width: 80%;

        max-height: 90px;
    }

}


/* =================================================
   MOBILE PEQUEÑO
================================================== */

@media (max-width: 380px) {

    .partners-three .partner {

        height: 130px;

        padding:
            20px
            35px;
    }


    .partners-three .partner img {

        max-width: 85%;

        max-height: 75px;
    }

}

/* =================================================
   CUERPO TÉCNICO
================================================== */

.technical-team {

    margin-top: 100px;

    padding-top: 70px;

    border-top:
        1px solid
        rgba(255,255,255,.10);
}


.technical-header {

    display: grid;

    grid-template-columns:
        1fr
        .7fr;

    gap: 60px;

    align-items: end;
}


.technical-intro {

    max-width: 320px;
}


.technical-intro p {

    margin: 0;

    color: #777;

    font-size: 11px;

    line-height: 1.8;

    letter-spacing: 1px;
}


/* GRID */

.technical-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;

    margin-top: 50px;
}


/* CARD */

.staff-card {

    position: relative;

    min-width: 0;

    background: #111;

    overflow: hidden;
}


.staff-image {

    position: relative;

    aspect-ratio: .82;

    overflow: hidden;

    background: #171717;
}


.staff-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(0,0,0,.95)
        );
}


.staff-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform .7s
        cubic-bezier(.22,1,.36,1);
}


.staff-card:hover
.staff-image img {

    transform: scale(1.05);
}


/* NUMBER */

.staff-number {

    position: absolute;

    left: 15px;

    top: 15px;

    z-index: 2;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 45px;

    font-weight: 900;

    line-height: .8;

    color: rgba(255,255,255,.85);
}


/* INFO */

.staff-info {

    position: relative;

    z-index: 3;

    margin-top: -65px;

    padding:
        15px
        15px
        25px;
}


.staff-info small {

    display: block;

    margin-bottom: 8px;

    color: #ed1c24;

    font-size: 7px;

    letter-spacing: 1.5px;
}


.staff-info h3,
.staff-info strong {

    display: block;

    margin: 0;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 30px;

    line-height: .8;

    font-weight: 800;
}


.staff-info strong {

    color: #fff;
}


/* LÍNEA ROJA */

.staff-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 3px;

    height: 0;

    background: #ed1c24;

    z-index: 10;

    transition:
        height .45s
        cubic-bezier(.22,1,.36,1);
}


.staff-card:hover::before {

    height: 100%;
}



/* =================================================
   TABLET
================================================== */

@media (max-width: 900px) {

    .technical-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

}


/* =================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

    .technical-team {

        margin-top: 70px;

        padding-top: 50px;

    }


    .technical-header {

        grid-template-columns: 1fr;

        gap: 25px;

    }


    .technical-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;

        margin-top: 35px;

    }


    .staff-number {

        left: 9px;

        top: 9px;

        font-size: 32px;

    }


    .staff-info {

        margin-top: -55px;

        padding:
            10px
            10px
            18px;

    }


    .staff-info h3,
    .staff-info strong {

        font-size: 22px;

    }

}


/* =================================================
   MOBILE PEQUEÑO
================================================== */

@media (max-width: 380px) {

    .technical-grid {

        grid-template-columns: 1fr;

    }

}

/* =================================================
   SÍGUENOS EN REDES
================================================== */

.social-follow {

    position: relative;

    padding:
        110px 0
        100px;

    background: #101010;

    overflow: hidden;
}


/* Línea superior */

.social-follow::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 1px;

    background:
        rgba(255,255,255,.10);
}


/* Decoración roja */

.social-follow::after {

    content: "";

    position: absolute;

    right: -100px;
    bottom: -180px;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    background:
        rgba(237,28,36,.08);

    filter: blur(20px);

    pointer-events: none;
}


.social-follow-inner {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 100px;

    align-items: center;
}


/* =================================================
   TEXTO
================================================== */

.social-follow-copy h2 {

    margin:
        55px 0
        25px;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        clamp(
            70px,
            9vw,
            135px
        );

    font-weight: 900;

    line-height: .72;

    letter-spacing: -.04em;
}


.social-follow-copy h2 em {

    display: block;

    color: #ed1c24;

    font-style: normal;
}


.social-follow-copy p {

    max-width: 360px;

    margin: 0;

    color: #777;

    font-size: 12px;

    line-height: 1.8;
}


/* =================================================
   REDES
================================================== */

.social-follow-links {

    display: flex;

    flex-direction: column;

    border-top:
        1px solid
        rgba(255,255,255,.12);
}


.social-follow-item {

    position: relative;

    display: grid;

    grid-template-columns:
        65px
        1fr
        30px;

    align-items: center;

    gap: 20px;

    min-height: 105px;

    padding: 15px 5px;

    border-bottom:
        1px solid
        rgba(255,255,255,.12);

    transition:
        background .3s ease,
        padding .3s ease;
}


.social-follow-item:hover {

    padding-left: 20px;

    background:
        rgba(237,28,36,.08);
}


/* ICONO */

.social-icon {

    width: 48px;

    height: 48px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(255,255,255,.25);

    color: #fff;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 15px;

    font-weight: 800;

    transition:
        background .3s ease,
        border-color .3s ease;
}


.social-follow-item:hover
.social-icon {

    background: #ed1c24;

    border-color: #ed1c24;
}


/* TEXTO */

.social-name {

    display: flex;

    flex-direction: column;

    gap: 6px;
}


.social-name small {

    color: #777;

    font-size: 7px;

    letter-spacing: 2px;
}


.social-name strong {

    color: #fff;

    font-size: 11px;

    letter-spacing: .5px;
}


/* FLECHA */

.social-arrow {

    color: #ed1c24;

    font-size: 20px;

    transition:
        transform .3s ease;
}


.social-follow-item:hover
.social-arrow {

    transform:
        translate(4px,-4px);
}


/* =================================================
   TABLET
================================================== */

@media (max-width: 900px) {

    .social-follow-inner {

        grid-template-columns:
            1fr;

        gap: 60px;

    }


    .social-follow-copy h2 {

        margin-top: 45px;

    }

}


/* =================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

    .social-follow {

        padding:
            80px 0;

    }


    .social-follow-inner {

        gap: 45px;

    }


    .social-follow-copy h2 {

        font-size:
            clamp(
                65px,
                19vw,
                105px
            );

        margin:
            45px 0
            20px;

    }


    .social-follow-item {

        grid-template-columns:
            50px
            1fr
            25px;

        gap: 14px;

        min-height: 90px;

    }


    .social-icon {

        width: 42px;

        height: 42px;

        font-size: 13px;

    }


    .social-name strong {

        font-size: 9px;

    }


    .social-follow-item:hover {

        padding-left: 10px;

    }

}

/* =========================================================
   HERO — ESCUDO JUNTO A "LA SELECCIÓN"
========================================================= */

.hero h1 .hero-title-line {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    max-width: 100%;
    color: var(--white);
    vertical-align: middle;
    white-space: nowrap;
}

.hero h1 .hero-title-text {
    display: inline;
    color: var(--white);
}

.hero h1 .hero-title-shield {
    display: block;
    width: clamp(75px, 9vw, 150px);
    height: auto;
    object-fit: contain;
    flex: 0 0 auto;
    margin-left: clamp(12px, 1.8vw, 28px);
    align-self: center;
}

/* El segundo span sigue ocupando su propia línea */
.hero h1 > span:not(.hero-title-line) {
    display: block;
    color: var(--red);
}

@media (max-width: 900px) {

    .hero h1 .hero-title-shield {
        width: clamp(65px, 10vw, 105px);
        margin-left: 14px;
    }

}

@media (max-width: 600px) {

    .hero h1 .hero-title-line {
        max-width: 100%;
    }

    .hero h1 .hero-title-shield {
        width: clamp(48px, 14vw, 75px);
        margin-left: 9px;
    }

}

@media (max-width: 420px) {

    .hero h1 .hero-title-shield {
        width: 48px;
        margin-left: 7px;
    }

}

/* =========================================================
   AJUSTE MODAL JUGADOR — MOBILE
========================================================= */

@media (max-width: 768px) {

    .player-modal {
        padding: 12px;
        align-items: center;
    }

    .modal-box {

        width: 100%;

        max-width: 500px;

        max-height: calc(100dvh - 24px);

        display: flex;

        flex-direction: column;

        overflow-y: auto;

        overflow-x: hidden;

        -webkit-overflow-scrolling: touch;
    }


    /* FOTO */

    .modal-photo {

        width: 100%;

        height: auto;

        min-height: 0;

        max-height: none;

        aspect-ratio: 4 / 5;

        flex-shrink: 0;

        overflow: hidden;

        background: #111;
    }


    .modal-photo img {

        width: 100%;

        height: 100%;

        object-fit: cover;

        object-position: center top;

        display: block;
    }


    /* INFORMACIÓN */

    .modal-details {

        padding:
            25px
            22px
            28px;

        display: block;
    }


    .modal-details h2 {

        font-size:
            clamp(
                52px,
                16vw,
                76px
            );

        line-height: .78;

        margin:
            15px 0
            20px;
    }


    .modal-details p {

        font-size: 12px;

        line-height: 1.6;

        margin-bottom: 15px;
    }


    .modal-stats {

        margin:
            25px 0;

        grid-template-columns:
            repeat(3, 1fr);

        gap: 10px;
    }


    .modal-social {

        display: flex;

        flex-wrap: wrap;

        gap: 12px;
    }


    /* BOTÓN CERRAR */

    .modal-close {

        position: fixed;

        z-index: 20;

        top: 22px;

        right: 22px;

        width: 42px;

        height: 42px;

        display: flex;

        align-items: center;

        justify-content: center;

        background: #444;

        color: #fff;

        border: 0;

        font-size: 25px;

        cursor: pointer;
    }

}


/* =========================================================
   CELULARES PEQUEÑOS
========================================================= */

@media (max-width: 480px) {

    .player-modal {

        padding: 8px;
    }


    .modal-box {

        max-height:
            calc(100dvh - 16px);

        border-radius: 0;

    }


    .modal-photo {

        aspect-ratio:
            4 / 4.5;
    }


    .modal-details {

        padding:
            22px
            18px
            25px;
    }


    .modal-details h2 {

        font-size:
            clamp(
                48px,
                15vw,
                68px
            );
    }


    .modal-stats strong {

        font-size:
            25px;
    }


    .modal-close {

        top: 18px;

        right: 18px;

        width: 40px;

        height: 40px;
    }

}


/* =========================================================
   PARTNERS — LOGOS EN COLOR
========================================================= */

.partners-three .partner img {
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal;
}

/* También en móvil */

@media (max-width: 768px) {

    .partners-three .partner img {
        filter: none !important;
        opacity: 1 !important;
        mix-blend-mode: normal;
    }

}

.developer-credit {

    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    white-space: nowrap;
}


.developer-credit img {

    display: block;
    width: 75px;
    height: auto;
    max-height: 38px;
    object-fit: contain;
    object-position: center;

}


/* =================================================
   MOBILE
================================================= */

@media (max-width: 600px) {

    .footer-bottom {

        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .developer-credit {
        justify-content: flex-start;
        gap: 10px;
    }

    .developer-credit img {
        width: 65px;
        max-height: 32px;
    }

}