/* ==========================================================================
   ACCESO ABONADOS — flyer ancho post "Quiénes Somos"
   ==========================================================================

   Ajustes rápidos:
   - --abonados-flyer-max: ancho máximo visible del banner.
   - --abonados-flyer-aspect-* : proporción del recorte por viewport.
   - --abonados-flyer-radius: usa tokens globales de radio.
   - --abonados-flyer-border-* : borde normal/hover/focus.
   - object-position: cambia foco si el diseño necesita mostrar otro lado.
*/

.section-abonados-flyer {
    --abonados-flyer-max: 1200px;
    --abonados-flyer-radius: var(--radius-header);
    --abonados-flyer-aspect-desktop: 20 / 5;
    --abonados-flyer-aspect-tablet: 16 / 7;
    --abonados-flyer-aspect-mobile: 16 / 5;
    --abonados-flyer-border: var(--border-light);
    --abonados-flyer-border-hover: rgba(250, 166, 26, 0.48);
    --abonados-flyer-focus: rgba(250, 166, 26, 0.45);

    background: var(--pearl);
    padding: 0 var(--space-md) var(--space-2xl);
}

.abonados-flyer-container {
    width: min(100%, var(--abonados-flyer-max));
    margin: 0 auto;
}

.abonados-flyer-card {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--abonados-flyer-aspect-desktop);
    border-radius: var(--abonados-flyer-radius);
    border: var(--border-width) solid var(--abonados-flyer-border);
    background: var(--surface-white);
    box-shadow: var(--shadow-sm);
    transition:
        transform var(--transition-smooth),
        border-color var(--transition-smooth),
        box-shadow var(--transition-smooth);
}

.abonados-flyer-card:hover,
.abonados-flyer-card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--abonados-flyer-border-hover);
    box-shadow: var(--shadow-md);
}

.abonados-flyer-card:focus-visible {
    outline: 3px solid var(--abonados-flyer-focus);
    outline-offset: 4px;
}

.abonados-flyer-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 1023px) {
    .abonados-flyer-card {
        aspect-ratio: var(--abonados-flyer-aspect-tablet);
    }
}

@media (max-width: 640px) {
    .section-abonados-flyer {
        padding-inline: var(--space-sm);
    }

    .abonados-flyer-card {
        aspect-ratio: var(--abonados-flyer-aspect-mobile);
        border-radius: var(--radius-lg);
    }
}