:root {
    /*! put your custom css here */
}

/* Menu principal (escritorio y celular): "Inicio" en mayusculas, como las categorias. En
   escritorio el menu toma el text-transform de su propia variable, asi que se define esa. */
.exp-mega-menu__nav-bar__item {
    --dxp-c-mega-menu-nav-bar-item-text-transform: uppercase;
}

.exp-mobile-mega-menu__main-list-item,
.exp-mobile-mega-menu__main-list-item > a,
.exp-mobile-mega-menu__main-list-item > button {
    text-transform: uppercase !important;
}

/* Título del producto: "SKU#:" y el código en la misma línea (el código tiene otro interlineado y
   quedaba más abajo). */
commerce_product_details-heading .slds-grid {
    align-items: baseline;
}

/* Detalle del producto: los atributos son varias tablas estandar apiladas; sin el espacio entre
   componentes, todas las filas quedan con la misma separacion. */
.product-details-table.component-wrapper-spacer {
    margin-bottom: 0;
}

/* Banners con texto (Quienes somos, Partners) en celular: el texto usa todo el ancho y el titulo
   baja de tamano, para que no se salga de la pantalla. */
@media only screen and (max-width: 47.9375em) {
    dxp_content_layout-block-content-region .main-content {
        width: 100% !important;
        max-width: 100% !important;
    }

    dxp_content_layout-block-content-region h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        overflow-wrap: break-word;
    }
}