/*
  GARAGE PREMIUM - TABLET CSS
  min-width: 768px - max-width: 1023px
*/

@media (min-width: 768px) {
    :root {
        --container-padding: 1.5rem;
    }

    /* Grid productos */
    .productos-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Hero */
    .hero-titulo {
        font-size: 2.5rem;
    }

    .hero-botones {
        flex-direction: row;
        justify-content: center;
    }

    /* Estadísticas */
    .estadisticas-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Pasos */
    .pasos-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Beneficios */
    .beneficios-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Catálogo layout */
    .catalogo-layout {
        flex-direction: row;
    }

    .catalogo-filtros {
        display: block;
        width: 250px;
        flex-shrink: 0;
        position: sticky;
        top: calc(var(--header-height) + var(--space-lg));
        align-self: flex-start;
        max-height: calc(100vh - var(--header-height) - var(--space-2xl));
        overflow-y: auto;
    }

    .catalogo-contenido {
        flex: 1;
    }

    .btn-filtros-movil {
        display: none;
    }

    /* Producto layout */
    .producto-layout {
        flex-direction: row;
        align-items: flex-start;
    }

    .producto-galeria {
        width: 50%;
        position: sticky;
        top: calc(var(--header-height) + var(--space-lg));
    }

    .producto-info {
        width: 50%;
    }

    /* Checkout pasos */
    .paso-item .paso-texto {
        display: inline;
    }

    /* Checkout layout */
    .checkout-layout {
        flex-direction: row;
    }

    .checkout-formulario {
        flex: 1;
    }

    .checkout-resumen {
        width: 350px;
        position: sticky;
        top: calc(var(--header-height) + var(--space-lg));
        align-self: flex-start;
    }

    /* Formulario grid */
    .form-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Confirmación acciones */
    .confirmacion-acciones {
        flex-direction: row;
        justify-content: center;
    }
}