/*
|--------------------------------------------------------------------------
| R4.8I.2.2 — Gestos táctiles robustos de Inicio
|--------------------------------------------------------------------------
| El navegador conserva scroll vertical y zoom. El eje horizontal queda
| disponible para Hero y Promociones mediante Pointer/Touch Events.
*/

.hero .slider,
.inicio-promociones-ventana {
    touch-action: pan-y pinch-zoom;
    overscroll-behavior-x: contain;
}

@media (pointer: coarse) {
    .hero .slider,
    .inicio-promociones-ventana {
        -webkit-user-select: none;
        user-select: none;
    }

    .hero .slider.inicio-gesto-arrastrando,
    .inicio-promociones-ventana.inicio-gesto-arrastrando {
        cursor: grabbing;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero .diapositiva,
    .inicio-promocion-slide {
        scroll-behavior: auto;
    }
}

/*
|--------------------------------------------------------------------------
| R4.8I.2.7 — Controles laterales bajos del Hero en escritorio
|--------------------------------------------------------------------------
| Las flechas dejan de compartir la zona inferior con la franja informativa.
| Los puntos permanecen abajo; anterior/siguiente se anclan a los costados
| en la zona inferior del Hero, justo por encima de la franja informativa.
*/

/* Alineación interna común de las flechas: evita padding/line-height heredados. */
.hero .slider-flecha {
    display: grid;
    place-items: center;
    padding: 0;
    line-height: 1;
}

.hero .slider-flecha .inicio-icono {
    display: block;
    margin: 0;
    flex: 0 0 auto;
    transform: none;
}

/* En móvil los puntos permanecen exactamente al centro; las flechas siguen a la derecha. */
@media (max-width: 900px) {
    .hero .slider-controles {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: var(--contenedor);
        min-height: 42px;
        margin: 7px auto 8px;
        display: block;
        transform: none;
    }

    .hero .slider-puntos {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
    }

    .hero .slider-flechas {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 3;
    }
}

@media (min-width: 901px) {
    .hero .slider-controles {
        position: absolute;
        inset: 0;
        width: auto;
        transform: none;
        pointer-events: none;
    }

    /* Indicadores centrados respecto del Hero, no del contenido interno. */
    .hero .slider-puntos {
        position: absolute;
        left: 50%;
        bottom: 76px;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        z-index: 12;
        pointer-events: auto;
    }

    .hero .slider-flechas {
        position: absolute;
        inset: 0;
        display: block;
        pointer-events: none;
    }

    .hero .slider-flecha {
        position: absolute;
        top: auto;
        bottom: 58px;
        z-index: 8;
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0;
        display: grid;
        place-items: center;
        line-height: 1;
        transform: none;
        pointer-events: auto;
    }

    .hero .slider-flecha .inicio-icono {
        display: block;
        width: 18px;
        height: 18px;
        margin: 0;
        flex: 0 0 auto;
        transform: none;
    }

    .hero #slideAnterior {
        left: 18px;
    }

    .hero #slideSiguiente {
        right: 18px;
    }
}


/*
|--------------------------------------------------------------------------
| R4.8I.2.10 — Hero compacto en escritorio ancho
|--------------------------------------------------------------------------
| Reduce únicamente el aire vertical del Hero en layouts de dos columnas.
| No cambia controles, swipe, autoplay, tablet ni móvil. Al conservar
| min-height (no height fija), contenido excepcionalmente largo puede crecer.
*/
@media (min-width: 1061px) {
    .hero .diapositiva {
        padding-top: 32px;
        padding-bottom: 70px;
    }

    .hero .diapositiva-grid {
        min-height: 420px;
    }
}

/*
|--------------------------------------------------------------------------
| R4.8J.2 — Controles del Hero sin solapamiento en tablet/móvil
|--------------------------------------------------------------------------
| Dos columnas laterales iguales reservan el mismo espacio a ambos lados del
| centro. Así los indicadores permanecen centrados respecto del Hero y las
| flechas conservan su zona táctil aun cuando existan muchas diapositivas.
*/
@media (max-width: 900px) {
    .hero .slider-controles {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr) 92px;
        align-items: center;
    }

    .hero .slider-puntos {
        position: static;
        grid-column: 2;
        width: 100%;
        max-width: 100%;
        justify-content: center;
        overflow-x: auto;
        overflow-y: hidden;
        transform: none;
        scrollbar-width: none;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .hero .slider-puntos::-webkit-scrollbar {
        display: none;
    }

    .hero .slider-punto {
        flex: 0 0 auto;
    }

    .hero .slider-flechas {
        position: static;
        grid-column: 3;
        justify-self: end;
        transform: none;
    }
}

@media (max-width: 360px) {
    .hero .slider-controles {
        grid-template-columns: 82px minmax(0, 1fr) 82px;
    }
}