@charset "utf-8";
/* CSS Document */

/*==========================
      TITULO
==========================*/

.titulo-sucursales{

    width:100%;
    overflow:hidden;
    background:#fff;
    padding:60px 0 90px;
    text-align:center;

}

.titulo-sucursales h3{

    font-family:Montserrat,sans-serif;
    font-size:60px;
    font-weight:700;
    color:#2f2323;
    letter-spacing:7px;
    margin-bottom:15px;

}

.contenedor-ondas{

    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    gap:15px;

}
.titulo-sucursales h2{

    flex:0 0 auto;
    font-family:Montserrat,sans-serif;
    font-size:92px;
    font-weight:700;
    color:#005D74;
    margin:0 10px;
    padding:0 18px;
    background:#fff;
    position:relative;
    z-index:100;

}


/*==========================
        ONDAS
==========================*/

.ondas{

    width:650px;
    height:270px;
    overflow:visible;
    position:relative;
    top:28px;

}

.izquierda{
    animation:ondaIzq 6s ease-in-out infinite alternate;
}

.derecha{
    transform:scaleX(-1);
    animation:ondaDer 6s ease-in-out infinite alternate;
}

.wave{

    fill:none;
    stroke-linecap:round;

}


/*==========================
      COLORES
==========================*/
.w1{

stroke:#d8eeff;
stroke-width:95;
opacity:.18;

}

.w2{

stroke:#9fd5ff;
stroke-width:76;
opacity:.30;

}

.w3{

stroke:#5db4ff;
stroke-width:56;
opacity:.48;

}

.w4{

stroke:#1b82de;
stroke-width:38;
opacity:.78;

}

.w5{

stroke:#005bbd;
stroke-width:24;

}

.blanco{

stroke:white;
stroke-width:6;

}

/*==========================
      ANIMACION
==========================*/

@keyframes ondaIzq{

0%{

transform:translateX(0);

}

50%{

transform:translateX(95px) translateY(-16px);

}

100%{

transform:translateX(0);

}

}

@keyframes ondaDer{

0%{

transform:scaleX(-1) translateX(0);

}

50%{

transform:scaleX(-1) translateX(95px) translateY(16px);

}

100%{

transform:scaleX(-1) translateX(0);
	}
}
.wave{

    transform-box:fill-box;
    transform-origin:center;

}

.izquierda g:first-child{

    animation:ondaArriba 6s ease-in-out infinite alternate;

}

.izquierda g:last-child{

    animation:ondaAbajo 8s ease-in-out infinite alternate;

}

.derecha g:first-child{

    animation:ondaArribaDer 6s ease-in-out infinite alternate;

}

.derecha g:last-child{

    animation:ondaAbajoDer 8s ease-in-out infinite alternate;

}
@keyframes ondaArriba{

0%{
transform:translateY(-45px) translateX(0);
}

100%{
transform:translateY(-45px) translateX(70px);
}

}

@keyframes ondaAbajo{

0%{
transform:translateY(55px) translateX(0) scale(.92);
}

100%{
transform:translateY(55px) translateX(35px) scale(.92);
}

}

@keyframes ondaArribaDer{

0%{
transform:translateY(-45px) translateX(0);
}

100%{
transform:translateY(-45px) translateX(70px);
}

}

@keyframes ondaAbajoDer{

0%{
transform:translateY(55px) translateX(0) scale(.92);
}

100%{
transform:translateY(55px) translateX(35px) scale(.92);
}
}

.productos-section-premium {
    padding-top: 30px !important;
    padding-bottom: 40px !important;
}
/* =========================================================
   GP CLEAN - RESPONSIVE MOBILE
   Ajustes para celulares y tablets sin alterar el diseño desktop
========================================================= */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg,
video,
iframe {
    max-width: 100%;
}

/* NAVBAR */
@media (max-width: 991.98px) {
    .container-fluid.nav-bar,
    .nav-bar.container-sm,
    .nav-bar.container-md,
    .nav-bar.container-lg,
    .nav-bar.container-xl {
        position: relative;
    }

    .navbar {
        padding: 10px 16px !important;
    }

    .navbar-brand {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .navbar-brand img {
        height: 56px !important;
        width: auto !important;
    }

    .navbar-toggler {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 8px;
        border: 1px solid #05417D !important;
        border-radius: 6px;
        background: #fff !important;
    }

    .navbar-toggler-icon {
        width: 24px;
        height: 18px;
        background-image: none !important;
        position: relative;
        display: block;
        border-top: 2px solid #05417D;
        border-bottom: 2px solid #05417D;
    }

    .navbar-toggler-icon::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 7px;
        border-top: 2px solid #05417D;
    }

    .navbar-collapse {
        margin-top: 8px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(5,65,125,.10);
        overflow: visible;
    }

    .navbar-nav {
        padding: 8px 0 !important;
        width: 100%;
    }

    .navbar-nav .nav-link {
        padding: 10px 16px !important;
        font-size: 16px;
        line-height: 1.25;
    }

    .navbar-nav .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        margin: 0;
        border: 0;
        box-shadow: none;
        background: #f7fbfe;
    }

    .navbar-nav .dropdown-item {
        white-space: normal;
        padding: 10px 24px;
    }
}

/* TITULOS GENERALES */
@media (max-width: 767.98px) {
    .section-title {
        padding: 45px 0 25px !important;
    }

    .section-title::after {
        height: 45px;
    }

    .section-title h1,
    .section-title h2,
    .section-title h3,
    .section-title .display-4 {
        max-width: 100%;
        overflow-wrap: break-word;
    }

    .display-4 {
        font-size: 2rem !important;
        line-height: 1.18 !important;
    }

    .container,
    .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }

    p {
        overflow-wrap: break-word;
    }
}

/* NOSOTROS */
@media (max-width: 767.98px) {
    .brands-slider {
        margin: 10px 0 20px;
    }

    .brands-track {
        gap: 22px;
    }

    .brands-track img {
        height: 58px;
    }

    .container-fluid.py-5 .row > [class*="col-lg-4"] {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
}

/* SUCURSALES */
@media (max-width: 767.98px) {
    .titulo-sucursales {
        padding: 30px 0 45px;
    }

    .titulo-sucursales h3 {
        font-size: 30px;
        letter-spacing: 4px;
        margin-bottom: 4px;
    }

    .contenedor-ondas {
        display: block;
        position: relative;
        height: auto;
        min-height: 75px;
    }

    .titulo-sucursales h2 {
        font-size: 42px;
        line-height: 1.1;
        letter-spacing: 1px;
        margin: 0;
        padding: 0 8px;
    }

    .titulo-sucursales .ondas {
        display: none;
    }

    .titulo-sucursales + * {
        margin-top: 0;
    }

    .col-lg-6.mb-5 {
        margin-bottom: 30px !important;
    }

    .col-lg-6.mb-5 .row.align-items-center {
        text-align: center;
    }

    .col-lg-6.mb-5 .row.align-items-center > [class*="col-sm-"] {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .col-lg-6.mb-5 .row.align-items-center img {
        max-height: 180px;
        width: auto;
        margin: 0 auto 15px;
    }
}

/* NUESTRAS MARCAS */
@media (max-width: 767.98px) {
    .marcas-slider {
        padding-bottom: 25px !important;
        margin-bottom: 15px !important;
    }

    .marcas-slider:last-of-type {
        padding-bottom: 45px !important;
    }

    .marcas-track-top,
    .marcas-track-bottom {
        gap: 25px !important;
    }

    .marcas-track-top img,
    .marcas-track-bottom img {
        width: auto !important;
        height: 62px !important;
        max-width: 120px !important;
        object-fit: contain;
    }
}

/* PRODUCTOS */
@media (max-width: 767.98px) {
    .productos-section-premium {
        padding: 30px 0 35px !important;
    }

    .productos-mini-title {
        font-size: 28px !important;
        letter-spacing: 3px !important;
    }

    .productos-main-title {
        font-size: 28px !important;
        line-height: 1.25 !important;
        margin-bottom: 12px !important;
    }

    .productos-subtitulo {
        font-size: 14px !important;
        line-height: 1.6 !important;
        padding: 0 5px;
    }

    .productos-carousel-wrapper {
        padding: 0 12px !important;
    }

    .productos-carousel-premium .item {
        padding: 10px 5px 25px !important;
    }

    .producto-card-premium {
        border-radius: 18px;
    }

    .producto-img-box-premium {
        min-height: 205px !important;
        padding: 22px 16px 14px !important;
    }

    .producto-img-premium {
        max-height: 155px !important;
    }

    .producto-info-premium {
        padding: 16px 16px 22px !important;
    }

    .producto-info-premium h4 {
        font-size: 17px !important;
        line-height: 1.3 !important;
        min-height: auto !important;
    }

    .producto-info-premium p {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    .productos-carousel-premium .owl-nav {
        gap: 8px !important;
        margin-top: 8px !important;
    }

    .productos-carousel-premium .owl-nav button.owl-prev,
    .productos-carousel-premium .owl-nav button.owl-next {
        min-width: 100px !important;
        height: 42px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
    }

    .productos-carousel-premium .owl-nav button span {
        font-size: 13px !important;
    }

    .productos-carousel-premium .owl-dots {
        margin-top: 8px !important;
    }
}

/* CATALOGO */
@media (max-width: 767.98px) {
    .catalogo-box {
        width: 100%;
        max-width: 100%;
        padding: 30px 20px !important;
    }

    .catalogo-box h1 {
        font-size: 26px !important;
        line-height: 1.2;
    }

    .catalogo-box img {
        max-width: 160px !important;
    }
}

/* CONTACTO / SERVICIOS / FAQS */
@media (max-width: 767.98px) {
    .container-fluid.my-5,
    .container-fluid.pt-5 {
        margin-top: 25px !important;
        margin-bottom: 25px !important;
    }

    .container-fluid.my-5 .row,
    .container-fluid.pt-5 .row {
        margin-left: 0;
        margin-right: 0;
    }

    .container-fluid.my-5 .col-lg-6,
    .container-fluid.pt-5 .col-lg-6 {
        padding-left: 5px;
        padding-right: 5px;
    }

    iframe {
        width: 100% !important;
        max-width: 100%;
    }

    .input-group,
    .input-group .btn {
        width: 100%;
    }
}

/* PROMOCIONES / CARRUSELES */
@media (max-width: 767.98px) {
    .testimonial-carousel .owl-item img {
        max-width: 100%;
        height: auto;
    }

    .testimonial-carousel .owl-dots {
        margin-top: 15px;
    }
}

/* FOOTER */
@media (max-width: 767.98px) {
    body > br {
        display: none;
    }

    .row.mx-0.pt-5.px-sm-3.px-lg-5.mt-4 {
        margin-top: 15px !important;
        padding: 35px 15px 10px !important;
    }

    .row.mx-0.pt-5.px-sm-3.px-lg-5.mt-4 > [class*="col-"] {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 28px !important;
        text-align: center;
    }

    .row.mx-0.pt-5.px-sm-3.px-lg-5.mt-4 h4 {
        font-size: 18px !important;
        letter-spacing: 2px !important;
        line-height: 1.35;
    }

    .row.mx-0.pt-5.px-sm-3.px-lg-5.mt-4 p {
        font-size: 14px;
        line-height: 1.55;
        overflow-wrap: anywhere;
    }

    .row.mx-0.pt-5.px-sm-3.px-lg-5.mt-4 .d-flex {
        justify-content: center !important;
        flex-wrap: wrap;
        gap: 6px;
    }

    .row.mx-0.pt-5.px-sm-3.px-lg-5.mt-4 .d-flex img {
        max-width: 55px;
        height: auto !important;
    }

    .container-fluid.text-center.text-white.border-top {
        padding: 20px 15px !important;
    }

    .container-fluid.text-center.text-white.border-top p {
        font-size: 12px;
        line-height: 1.5;
    }
}

/* BOTON VOLVER ARRIBA */
@media (max-width: 767.98px) {
    .back-to-top {
        right: 15px !important;
        bottom: 15px !important;
        width: 42px !important;
        height: 42px !important;
    }
}

/* REDUCE ANIMACIONES EN DISPOSITIVOS CON PREFERENCIA */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}


/* CARRUSEL PRINCIPAL - AJUSTE RESPONSIVE PARA CELULAR */
/* CARRUSEL PRINCIPAL - MOBILE: mostrar la portada completa sin recorte */
@media (max-width: 767.98px) {
    .carousel-wrapper {
        margin-top: 0 !important;
        overflow: hidden;
    }

    #carouselExampleIndicators1 .carousel-item {
        height: auto !important;
        min-height: 0 !important;
    }

    #carouselExampleIndicators1 .carousel-item img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: center center !important;
    }

    #carouselExampleIndicators1 .carousel-control-prev,
    #carouselExampleIndicators1 .carousel-control-next {
        width: 13% !important;
    }
}

/* =========================================================
   MOBILE - SCROLL NATIVO Y FLUIDO
   Evita que las animaciones y el carrusel interfieran con
   el gesto vertical de desplazamiento en teléfonos.
========================================================= */
html {
    scroll-behavior: auto !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto;
}

body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

@media (max-width: 767.98px) {
    /* El carrusel permite deslizar verticalmente la página sin pelearse
       con el gesto horizontal del carrusel. */
    .carousel-wrapper,
    #carouselExampleIndicators1,
    #carouselExampleIndicators1 .carousel-inner,
    #carouselExampleIndicators1 .carousel-item {
        touch-action: pan-y;
    }

    /* En móvil las animaciones de entrada no deben mover visualmente
       las secciones mientras el usuario está desplazándose. */
    .fade-scroll,
    .fade-scroll.show,
    .fade-left,
    .fade-left.show,
    .fade-right,
    .fade-right.show {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}