/* ===========================
   Club landing - match landing.css vibe
   (sin romper app.css)
   =========================== */

/* 1) Tokens oscuros como landing */
html, body { margin: 0; padding: 0; }

:root {
    --club-bg: #050505;
    --club-bg-soft: #0b0b0b;
    --club-card: #111111;
    --club-card-soft: #141414;
    --club-border: #262626;

    --club-text: #f5f5f5;
    --club-text-muted: #a3a3a3;

    --club-primary: #3b82f6;
    --club-primary-soft: rgba(59, 130, 246, 0.12);

    --club-radius-lg: 16px;
    --club-radius-xl: 24px;
    --club-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

/* 2) Fondo y tipografía similar al landing */
.club-body {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: radial-gradient(circle at top, #111111 0, #050505 55%, #050505 100%);
    color: var(--club-text);
}

/* 3) Header estilo landing (sticky, blur, borde) */
.club-header {
    position: sticky;
    top: 0;
    z-index: 30;
    backdrop-filter: blur(14px);
    background: linear-gradient(to bottom, rgba(5, 5, 5, 0.96), rgba(5, 5, 5, 0.80));
    border-bottom: 1px solid rgba(38, 38, 38, 0.9);
    padding: 0.75rem 1rem;
}

.club-header-inner {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.club-header-text p {
    margin: 0;
}

.club-header-greeting {
    font-size: 0.8rem;
    color: var(--club-text-muted);
}

.club-header-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 0.15rem;
}

.club-header-meta {
    font-size: 0.8rem;
    color: var(--club-text-muted);
    margin-top: 0.15rem;
}

/* 4) Botones iguales a landing */
.club-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.55rem 1.1rem;
    border: 1px solid transparent;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.16s ease-out;
    white-space: nowrap;
}

.club-btn-outline {
    background: transparent;
    color: var(--club-text);
    border-color: #3f3f46;
}

.club-btn-outline:hover {
    border-color: #52525b;
    background: #111111;
}

.club-btn-primary {
    background: var(--club-primary);
    color: #0a0a0a;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.45);
}

.club-btn-primary:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.6);
}

/* 5) Layout main como landing: centrado + padding */
.club-main {
    max-width: 1120px;
    margin: 0 auto;
    padding: 1.25rem 1.25rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* 6) Cards estilo landing */
.club-card {
    background: rgba(15, 15, 15, 0.92);
    border-radius: var(--club-radius-xl);
    border: 1px solid var(--club-border);
    box-shadow: var(--club-shadow);
    padding: 1.25rem 1.1rem;
}

.club-card-title {
    font-size: 1.05rem;
    margin: 0 0 0.35rem;
    font-weight: 700;
}

.club-card-subtitle {
    margin: 0;
    color: var(--club-text-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

/* 7) Grid de logos (partners) */
.club-logos-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.club-logo-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem;
    border-radius: 0.9rem;
    background: #0b0b0b;
    border: 1px solid #1f1f1f;
    text-decoration: none;
    transition: transform 0.12s ease, border-color 0.12s ease;
}

.club-logo-tile:hover {
    transform: translateY(-1px);
    border-color: rgba(59, 130, 246, 0.35);
}

.club-logo-img {
    max-width: 90px;
    max-height: 44px;
    object-fit: contain;
}

/* 8) Lista de detalles */
.club-partner {
    display: flex;
    gap: 0.85rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(38, 38, 38, 0.9);
}

.club-partner:first-of-type {
    border-top: none;
    padding-top: 0;
}

.club-partner-logo {
    width: 84px;
    height: 84px;
    border-radius: 0.9rem;
    background: #0b0b0b;
    border: 1px solid #1f1f1f;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem;
    flex-shrink: 0;
}

.club-partner-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.club-partner-name {
    margin: 0 0 0.2rem;
    font-size: 0.98rem;
    font-weight: 700;
}

.club-partner-short {
    margin: 0 0 0.35rem;
    color: var(--club-text);
    opacity: 0.92;
    font-size: 0.9rem;
}

.club-partner-detail {
    margin: 0;
    color: var(--club-text-muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

/* 9) Responsive: 2 columnas en teléfonos pequeños para logos */
@media (max-width: 420px) {
    .club-logos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .club-header {
        padding: 0.65rem 0.9rem;
    }

    .club-main {
        padding: 1rem 1rem 2.5rem;
    }

    .club-btn {
        padding: 0.48rem 0.9rem;
        font-size: 0.82rem;
    }
}

/* ---------------------------------------
   Club header: full-bleed + consistent padding
   --------------------------------------- */
.club-header {
    width: 100%;
    margin: 0;              /* por si algún estilo externo lo afecta */
    border-radius: 0;       /* evita "corte" visual */
}

/* Asegura que el contenedor interno no parezca recortado */
.club-header-inner {
    padding: 0.75rem 1.25rem;
}

/* Nav del header del club (evita wrap) */
.club-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: nowrap;      /* ✅ no se van para abajo */
}

/* Botones del header del club */
.club-header-actions .club-btn {
    flex: 0 0 auto;
}

/* Logo del header del club (no depende de landing.css) */
.club-header-logo img {
    display: block;
}

/* ---------------------------------------
   Small phones: reduce everything so it fits
   --------------------------------------- */
@media (max-width: 420px) {
    .club-header-inner {
        padding: 0.6rem 0.85rem;
        gap: 0.5rem;
    }

    .club-header-logo img {
        width: 54px;
        height: 54px;
    }

    .club-header-actions {
        gap: 0.45rem;
    }

    .club-header-actions .club-btn {
        padding: 0.45rem 0.9rem;
        font-size: 0.82rem;
    }
}

@media (max-width: 360px) {
    .club-header-actions .club-btn {
        padding: 0.42rem 0.75rem;
        font-size: 0.78rem;
    }
}

/* ===========================
   Header identical to landing.css
   (but using club tokens)
   =========================== */

.landing-header {
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(14px);
    background: linear-gradient(to bottom, rgba(5, 5, 5, 0.96), rgba(5, 5, 5, 0.80));
    border-bottom: 1px solid rgba(38, 38, 38, 0.9);
}

.landing-header-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;            /* ✅ crucial */
    justify-content: space-between;
    gap: 0.75rem;
}

.landing-logo {
    display: flex;
    align-items: center;            /* ✅ crucial */
    gap: 0.6rem;
}

.landing-logo img {
    display: block;                 /* ✅ same as landing */
}

.landing-nav {
    display: flex;
    align-items: center;            /* ✅ same as landing */
    gap: 0.55rem;
}

/* Buttons identical to landing.css but using club palette */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.55rem 1.3rem;
    border: 1px solid transparent;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.16s ease-out;
    white-space: nowrap;
}

.btn-outline {
    background: transparent;
    color: var(--club-text);
    border-color: #3f3f46;
}

.btn-outline:hover {
    border-color: #52525b;
    background: #111111;
}

.club-logo-tile.is-light {
    background: #f5f5f5;
    border-color: #e5e7eb;
}
.club-logo-tile.is-light img {
    filter: none;
}

/* Match the small-phone behavior exactly */
@media (max-width: 420px) {
    .landing-header-inner {
        padding: 0.6rem 0.85rem;
        gap: 0.5rem;
    }

    .landing-logo img {
        height: 54px;
        width: 54px;
    }

    .landing-nav {
        display: flex;
        gap: 0.45rem;
        justify-content: flex-end;
        align-items: center;
        flex-wrap: nowrap; /* ✅ no wrap */
    }

    .landing-nav .btn {
        padding: 0.45rem 0.9rem;
        font-size: 0.82rem;
    }
}

@media (max-width: 360px) {
    .landing-nav .btn {
        padding: 0.42rem 0.75rem;
        font-size: 0.78rem;
    }
}

/* ===========================
   Logos: tiles blancos + cuadrados
   =========================== */

/* 1) Grid: tiles cuadrados para que el logo no se vea chiquito */
.club-logo-tile {
    background: #ffffff;            /* tile blanco */
    border: 1px solid #e5e7eb;      /* borde claro */
    border-radius: 14px;
    padding: 0;                      /* quitamos padding para controlar con aspect-ratio */
    aspect-ratio: 1 / 1;             /* ✅ cuadrado */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Ajuste de tamaño del logo dentro del tile cuadrado */
.club-logo-img {
    max-width: 72%;
    max-height: 72%;
    object-fit: contain;
}

/* 2) Detalles: también tile blanco (antes era oscuro) */
.club-partner-logo {
    background: #ffffff;            /* ✅ blanco para logos oscuros */
    border: 1px solid #e5e7eb;
}

/* Asegura buen contraste si hay sombras/gradientes */
.club-partner-logo img {
    filter: none;
}

.club-logo-tile,
.club-partner-logo {
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}

/* Opcional: en pantallas grandes, puedes permitir que el grid sea 4 columnas */
@media (min-width: 640px) {
    .club-logos-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .club-logos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}