html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}



.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}





@media only screen and (min-width: 600px) and (max-width: 1380px) and (orientation: landscape){
    .color-modes .bd-theme {
        display: none !important;
    }



    .navbar-brand img {
        width: 170px !important; /* o cualquier tamaño más pequeño que el original */
        height: auto !important; /* mantiene la proporción */

    }

    .d-flex.mx-auto {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    .navbar-brand {
        margin-left: 0 !important;
        margin-right: auto !important;
        padding-left: 0 !important; /* elimina padding si hay */
    }

    .dropdown-toggle::after {
        display: none !important;
    }


    .px-xl-5.d-inline-block {
        display: none !important;
    }

    .justify-text {
        text-align: justify;
    }

    .product-info-size + label {
        font-size: 20px; /* más grande */
        padding: 20px 0; /* más alto */
        height: 70px; /* más espacio vertical */
        line-height: 45px;
        width: 100%; /* conserva ancho completo */
        text-align: center;
        margin: 0 auto;
    }

    .col-lg-5.mb-11.mb-lg-0 {
        margin-top: -10px; /* ajusta el valor a lo que necesites */
    }
}

@media only screen and (min-width: 600px) and (max-width: 1380px) and (orientation: portrait){
    .color-modes .bd-theme {
        display: none !important;
    }

    .navbar-brand img {
        width: 170px !important; /* o cualquier tamaño más pequeño que el original */
        height: auto !important; /* mantiene la proporción */
        margin-left: 190px !important;
    }

    .d-flex.mx-auto {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    .navbar-brand {
        margin-left: 0 !important;
        margin-right: auto !important;
        padding-left: 0 !important; /* elimina padding si hay */
    }

    .dropdown-toggle::after {
        display: none !important;
    }

    .offcanvas {
        z-index: 1060 !important;
    }

    .px-xl-5.d-inline-block {
        display: none !important;
    }

    .col-12 {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .justify-text {
        text-align: justify;
    }

    .product-info-size + label {
        font-size: 20px; /* más grande */
        padding: 20px 0; /* más alto */
        height: 60px; /* más espacio vertical */
        line-height: 35px;
        width: 100%; /* conserva ancho completo */
        text-align: center;
        margin: 0 auto;
    }

    .position-relative.container h2 {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .position-relative.container h1 {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    main.wrapper.layout-page {
        padding-top: 25px !important; /* Ajusta según la altura de tu header móvil */
    }

    .py-6 {
        padding-top: 0 !important;
    }

}

@media only screen and (min-width: 0px) and (max-width: 599px) {

    .color-modes .bd-theme {
        display: none !important;
    }

    .navbar-brand {
        margin-left: 0 !important; /* quita centrado automático */
    }

    .navbar-brand img {
        width: 120px !important;
        height: auto !important;
        margin-left: 0 !important; /* alinea totalmente a la izquierda */
    }

    .px-xl-5.d-inline-block {
        display: none !important;
    }

    .position-relative.container h2 {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .position-relative.container h1 {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .dropdown-toggle::after {
        display: none !important;
    }

    .fs-56px {
        font-size: 34px !important; /* o cualquier valor más pequeño */
    }

    ul.list-inline li.list-inline-item {
        margin-right: 3rem !important; /* aumenta separación entre cajas */
        width: calc(25% - 2rem); /* ajusta el ancho para no desbordar */
    }

    .pagination .page-item:not(.active):not(:first-child):not(:last-child):not(:nth-child(2)):not(:nth-last-child(2)) {
        display: none !important;
    }


    .product-info-size + label {
        font-size: 18px;
        padding: 16px 0;
        height: 55px;
        line-height: 38px;
        width: 100%;
        text-align: center;
        margin: 0 auto; /* centrado horizontal */
    }

    .col-12 {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .col-sm-12.col-lg-4.text-md-center.order-1.order-lg-2 {
        text-align: center;
    }

        .col-sm-12.col-lg-4.text-md-center.order-1.order-lg-2 img {
            display: block;
            margin: 0 auto;
        }

    .col-sm-12.col-md-6.col-lg-4.order-3 {
        text-align: center !important;
    }

        .col-sm-12.col-md-6.col-lg-4.order-3 p {
            margin: 0 auto;
            display: inline-block;
        }

        .col-sm-12.col-md-6.col-lg-4.order-3 img {
            display: inline-block;
            vertical-align: middle;
            margin-left: 6px;
        }

    .col-sm-12.col-md-6.col-lg-4 p.mb-0 {
        text-align: center;
        width: 100%;
    }

    .col-sm-12.col-md-6.col-lg-4 {
        flex-direction: column;
        align-items: center !important;
        text-align: center;
    }

        .col-sm-12.col-md-6.col-lg-4 ul.list-inline {
            margin-top: 10px; /* espacio entre el texto y los íconos */
            margin-left: 0;
        }


    p.mb-0 {
        text-align: center;
    }

    .justify-text {
        text-align: justify;
    }

    .offcanvas {
        z-index: 1060 !important;
    }

    .hero-content h1 {
        font-size: 28px; /* ajusta según tu diseño */
        line-height: 1.2;
    }

    .hero-content p {
        font-size: 16px;
        margin-bottom: 1rem;
    }

    .hero-content {
        padding: 1.5rem; /* menos padding en móviles */
    }

    main.wrapper.layout-page {
        padding-top: 20px !important; /* Ajusta según la altura de tu header móvil */
    }

    .py-6 {
        padding-top: 0 !important;
    }


}