/* ---------------------------------------------------------------------------
   Franja de partners de la preventa (Banco Ciudad + Buepp).

   El fondo es claro SIEMPRE, también con el tema oscuro activo. No es un
   descuido: el manual de normas del Banco Ciudad solo admite el isologotipo en
   su versión color sobre blanco o sobre Pantone Warm Gray 2 (#D4D1CB). Para
   ponerlo sobre el fondo oscuro del sitio haría falta la versión negativa, que
   no tenemos. Por eso la franja se aísla del tema.

   Tampoco se aplica ningún filtro de color a estos logos (los sponsors del home
   sí usan invert/brightness): el manual prohíbe recolorear el isologotipo.
   --------------------------------------------------------------------------- */

.motogp-partners {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    box-sizing: border-box;
    width: 100%;
    padding: 1.5rem clamp(1rem, 4vw, 2.5rem);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    /* Color base oscuro sobre el fondo blanco de la franja.
       Va en el contenedor a propósito: ticketshop-dark-theme.css fuerza
       `color: inherit` en todo p/span con una especificidad que ningún
       selector de una clase puede superar, así que los hijos heredan de acá.
       Sin esto, el texto queda gris claro sobre blanco e ilegible. */
    color: #1c1f23;
    text-align: center;
}

.motogp-partners-label {
    margin: 0;
    /* !important por el mismo `color: inherit` del tema oscuro. */
    color: #5a6068 !important;
    font-family: var(--motogp-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.motogp-partners-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    /* Separación generosa: el manual pide un área de protección de 4x alrededor
       del isologotipo horizontal, libre de otros elementos marcarios. */
    gap: clamp(1.5rem, 5vw, 3.5rem);
}

.motogp-partner-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Refuerza el área de protección incluso cuando los logos se apilan. */
    padding: 0.5rem 0.75rem;
    text-decoration: none;
}

.motogp-partner-logo img {
    display: block;
    width: auto;
    /* El manual marca una reducción máxima aconsejada de 25mm en impresión; en
       pantalla lo traducimos en no bajar de ~140px de ancho útil. */
    min-width: 140px;
    max-width: 380px;
    height: auto;
    /* Banco Ciudad y Buepp son sponsors de la preventa, no medios de pago:
       el alto manda para que los dos tengan el mismo peso óptico pese a sus
       proporciones distintas (el lockup del banco es mucho más alargado). */
    max-height: 80px;
    object-fit: contain;
}

/* Fallback mientras no esté el original del Banco Ciudad en la carpeta. */
.motogp-partner-logo-fallback {
    /* Pantone 286 del banco. !important por el `color: inherit` del tema. */
    color: #005baa !important;
    font-family: var(--motogp-font-body);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.motogp-partner-logo:hover img,
.motogp-partner-logo:focus-visible img {
    /* Sin cambios de color: solo una señal de que el logo es un enlace. */
    opacity: 0.82;
}

.motogp-partner-logo:focus-visible {
    outline: 2px solid #005baa;
    outline-offset: 3px;
    border-radius: 8px;
}

/* ----- Caluga 6 cuotas (home; misma pieza que /preventa) ----- */

.motogp-partners--caluga {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    gap: 0;
}

.motogp-partners-caluga-link {
    display: block;
    width: min(560px, 100%);
    margin: 0 auto;
    text-decoration: none;
}

.motogp-partners-caluga {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    object-fit: contain;
}

/* En /buy y /checkout: mismo tamaño que home (min 560px); 75vw solo en mobile. */
.motogp-partners--buy-strip.motogp-partners--caluga {
    margin: 2rem 0;
}

.motogp-partners--buy-strip .motogp-partners-caluga-link {
    width: min(560px, 100%);
    max-width: min(560px, 100%);
    margin: 0 auto;
}

.motogp-partners--buy-strip .motogp-partners-caluga {
    border-radius: 14px;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
}

@media (max-width: 768px) {
    .motogp-partners--buy-strip .motogp-partners-caluga-link {
        width: 75vw;
        max-width: 75vw;
    }
}

.motogp-home-partners-slot .motogp-partners--caluga {
    margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
}

/* ----- Variante grande, para la landing de preventa ----- */

.motogp-partners--hero {
    padding: 2.5rem clamp(1.5rem, 5vw, 3rem);
    gap: 1.75rem;
}

.motogp-partners--hero .motogp-partners-label {
    font-size: 0.82rem;
}

.motogp-partners--hero .motogp-partner-logo img {
    max-width: 520px;
    max-height: 112px;
}

.motogp-partners--hero .motogp-partner-logo-fallback {
    font-size: 1.35rem;
}

/* ----- Variante compacta, embebida en buy / checkout ----- */

.motogp-partners--strip {
    margin: 2rem 0;
}

/* En el home la franja va suelta bajo el hero, sin contenedor que la limite. */
.motogp-home-partners-slot {
    box-sizing: border-box;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 2rem);
}

.motogp-home-partners-slot .motogp-partners--strip {
    margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
}

@media (max-width: 600px) {
    .motogp-partners {
        padding: 1.5rem 1rem;
        border-radius: 12px;
    }

    /* Con este alto los dos logos ya no entran en una fila y se apilan, que es
       lo que queremos en mobile: cada sponsor a lo ancho de la tarjeta. */
    .motogp-partner-logo img {
        min-width: 0;
        max-width: 100%;
        max-height: 56px;
    }

    .motogp-partners--hero .motogp-partner-logo img {
        max-height: 68px;
    }

    .motogp-partners-logos {
        gap: 1.25rem;
    }
}