.jarra {
    margin-top: -93px;
    top: 68px;
    position: absolute;
    width: 269px;
}

img.fase1img {
    position: absolute;
    right: 0;
    top: 478px;
    z-index: -2;
}

img.fase2img {
    position: absolute;
    left: 150px;
    margin-top: 45px;
}

.fase2 {
    background: #f5f6fc;
}


img.imgshare {
    display: block;
    margin: 0 auto;
}

.slick-prev,
.slick-next {
    height: 50px;
    width: 50px;
    border-radius: 25px;
    background: #04BE67;
    color: #FFF;
    top: 44%;
    z-index: 1;
}

.slick-prev:hover,
.slick-next:hover,
.slick-prev:focus,
.slick-next:focus {
    height: 50px;
    width: 50px;
    border-radius: 25px;
    background: #04BE67;
    color: #FFF;

}

.slick-next {
    right: -10px;
}

.slick-prev {
    left: -10px;
}

.mantenimiento .sharethis p {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #00135C;
    font-size: 14px;
    line-height: 20px;
}

.img-center {
    margin: 0 auto;
    display: block;
}

.h-180 {
    height: 180px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.boximgrespon {
    width: 100%;
    height: 365px;
    overflow: hidden;
    position: relative;
    border-radius: 25px;
}

.imgrespon {
    object-fit: cover;
    position: absolute;
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
}

/* Banner */
.banner {
    margin-top: 105px;
    h1{
        font-family: 'Lato', sans-serif;
        font-weight: 900;
        color: #fff;
        font-size: 45px;
        line-height: 45px;
        letter-spacing: 5.4px;
        text-align: center;
        text-transform: uppercase;
 
    }
    h2{
        font-family: 'Lato', sans-serif;
        font-weight: 700;
        font-size: 30px;
        line-height: 40px;
        letter-spacing: 3.6px;
        text-align: center;
        text-transform: uppercase;
        color: #ffffff;
    }
    h3{
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        font-size: 24px;
        line-height: 40px;
        letter-spacing: 3.6px;
        text-align: center;
        text-transform: uppercase;
        color: #ffffff;
    }
    p{
        font-family: 'Roboto', sans-serif;
        color: #ffffff;
        font-weight: 400;
        font-size: 18px;
        line-height: 25px;
        letter-spacing: 0px;
        text-align: center;
    }
    a{
        display: inline-block;
        width: 158px;
        height: 42px;
        padding: 15px 25px;
        border-radius: 8px;
        background-color: #04BE67;
        color: #ffffff;
        font-family: 'Lato', sans-serif;
        font-weight: 700;
        font-size: 14px;
        line-height: 14px;
        letter-spacing: 0px;
        text-align: center;
        transition: all 0.3s ease-in-out;
    }
    a:hover{
        background-color: #00135C;
        color: #ffffff;
        text-decoration: none;
        transition: all 0.3s ease-in-out;
    }
}

/* MAP */
.map{
margin-top: 120px;
    h2{
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        font-size: 30px;
        line-height: 40px;
        letter-spacing: 3.6px;
        text-align: center;
        text-transform: uppercase;
        color: #00135C;
        span{
            color: #04BE67;
        }
    }
    p{
        font-family: 'Roboto', sans-serif;
        font-weight: 400;
        font-size: 18px;
        line-height: 25px;
        letter-spacing: 0px;
        text-align: center;
        color: #393939;
    }
    img{
        justify-self: center;
    }

    .lista-estados {
      list-style-type: none;
      padding: 0;
      width: 380px;
      margin-top: -45px;
    }

    .lista-estados h3 {
      font-family: 'Roboto', sans-serif;
      font-weight: 400;
      font-size: 17px;
      line-height: 21px;
      letter-spacing: 0.38px;
      color: #393939;
      display: flex; 
      align-items: center;
      margin-bottom: 12px;
    }
    .lista-estado-disclaimer {
      font-family: 'Roboto', sans-serif;
      font-weight: 400;
      font-size: 17px;
      line-height: 26px;
      letter-spacing: 0.38px;
      color: #393939;
      text-align: left;
      margin-top: 30px;
    }

    .color-dot {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      margin-right: 10px;
    }

    .dot-cdmx { background-color: #28a745; }
    .dot-edomex { background-color: #1e6823; }
    .dot-monterrey { background-color: #ff6b6b; }
    .dot-veracruz { background-color: #e83e8c; }
    .dot-guadalajara { background-color: #8a63d2; }
    .dot-guanajuato { background-color: #17a2b8; }
    .dot-hidalgo { background-color: #007bff; }
}

/* Elegir */
.elegir{
    background-color: #F5F6FC;
    padding: 120px 0px;
    h2{
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        font-size: 30px;
        line-height: 40px;
        letter-spacing: 3.6px;
        color: #00135C;
        text-align: center;
        text-transform: uppercase;
        span{
            color: #04BE67;
        }
    }
    p{
        font-family: 'Roboto', sans-serif;
        font-weight: 400;
        font-size: 17px;
        line-height: 26px;
        letter-spacing: 0.38px;
        color: #393939;
        text-align: center;
    }
    .btn-verde{
        display: inline-block;
        width: 177px;
        padding: 18px 5px;
        border-radius: 8px;
        background-color: #04BE67;
        color: #ffffff;
        font-family: 'Lato', sans-serif;
        font-weight: 700;
        font-size: 14px;
        line-height: 14px;
        letter-spacing: 0px;
        text-align: center;
        transition: all 0.3s ease-in-out;
    }
    .btn-verde:hover{
        background-color: #00135C;
        color: #ffffff;
        text-decoration: none;
        transition: all 0.3s ease-in-out;
    }
    video{
        width: 920px;
        height: 475px;
        border-radius: 20px;
        object-fit: fill;
    }
    #video-container {
        position: relative;
        cursor: pointer;
        max-width: 800px; /* Ajusta según tu diseño */
        margin: auto;
        overflow: hidden; /* Oculta partes del video que puedan salirse */
        border-radius: 15px; /* Para los bordes redondeados como en tu imagen */
    }

    #miVideo {
        width: 100%;
        height: auto;
        display: block;
    }

    #play-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80px; /* Tamaño del botón */
        height: 80px;
        transition: opacity 0.3s ease;
        display: none; /* Oculto por defecto, JS lo mostrará en móvil */
    }

    #play-button img {
        width: 100%;
        height: 100%;
    }
    .lineasdeproducto {
        width: 93vw;
        height: 452px;
        margin: 0 auto;
        padding: 62px 50px;
        background: url(https://artegasolineras.com/img/bgwlines.png);
        background-size: cover;
        background-repeat: no-repeat;
        border-radius: 33px;

    h2{
        font-family: Lato;
        font-weight: 400;
        font-size: 30px;
        line-height: 38px;
        letter-spacing: 3.6px;
        text-transform: uppercase;
        color: #ffffff;
        text-align: left;
        span{
            color: #04BE67;
            font-weight: 700;
        }
    }
    p{
        font-family: 'Roboto', sans-serif;
        font-weight: 400;
        font-size: 17px;
        line-height: 26px;
        letter-spacing: 0.38px;
        text-align: left;
        color: #ffffff;
    }
    .slider-prod {
        p{
           font-family: 'lato', sans-serif;
            font-weight: 700;
            font-size: 17px;
            line-height: 27px;
            letter-spacing: 0px;
            text-align: center;
 
        }
    }
}
/* Mantenimiento */
.mantenimiento {
    h2 {
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        font-size: 30px;
        line-height: 40px;
        letter-spacing: 3.6px;
        color: #04BE67;
        text-align: center;
        text-transform: uppercase;
        span {
            color: #04BE67;
        }
    }
    p {
        font-family: 'Roboto', sans-serif;
        font-weight: 400;
        font-size: 17px;
        line-height: 26px;
        letter-spacing: 0.38px;
        color: #393939;
        text-align: center;
    }
    .btn-naranja{
        width: 214px;
        height: 42px;
        padding: 11px 25px;
    }
    }
}

/* Share */
.share{
position: relative;
padding: 150px 0;
    a{
        font-family: 'lato', sans-serif;
        font-weight: 400;
        font-size: 24px;
        line-height: 40px;
        letter-spacing: 3.6px;
        text-align: center;
        text-transform: uppercase;
        color:#00135C;
        transition: all 0.3s ease-in-out;
    }
    a:hover{
        color: #04BE67;
        transition: all 0.3s ease-in-out;
    }
    p{
        font-family: 'Roboto', sans-serif;
        font-weight: 400;
        font-size: 14px;
        line-height: 25px;
        letter-spacing: 0px;
        text-align: center;
        color: #00135C;
    }
    .halo-left {
        position: absolute;
        left: 0;
        top: -69px;
        width: 433px;
        height: 120%;
    }
    .halo-right {
        position: absolute;
        right: 0;
        bottom: -111px;
        width: 261px;
        height: 75%;
    }
}
@media (min-width: 300px) and (max-width: 767px) {
    .banner{
        height: 722px;
        h1{
            font-size: 38px;
            line-height: 140%;
            letter-spacing: 5.4%;
        }
        h2{
            font-size: 24px;
            line-height: 140%;
            letter-spacing: 3.6%;
        }
        h3{
            font-size: 20px;
            line-height: 140%;
            letter-spacing: 2.6%;
        }
        p{
            font-size: 16px;
            line-height: 150%;
            letter-spacing: 0%;
        }
    }
    .map{
        margin-top: 80px;
        h2{
            font-size: 24px;
            line-height: 140%;
            letter-spacing: 3.6px;
        }
        p{
            font-size: 16px;
            line-height: 150%;
            letter-spacing: 0%;
        }
        .lista-estados {
            list-style-type: none;
            padding: 0;
            width: 100%;
            margin-top: 45px;
            display: flex;
            flex-wrap: wrap;
            margin-left: 10px;
            margin-right: 10px;
            h3{
                font-size: 12px;
                line-height: 150%;
                letter-spacing: 0%;
                width: 50%;
                margin-bottom: 12px;
            }
            .lista-estado-disclaimer{
                font-size: 12px;
                line-height: 150%;
                letter-spacing: 0%;
                margin-top: 15px;
            }
        }
    }
    .elegir{
        padding: 60px 0px;
        h2{
            font-size: 24px;
            line-height: 140%;
            letter-spacing: 3.6px;
        }
        p{
            font-size: 16px;
            line-height: 150%;
            letter-spacing: 0%;
        }
        video {
        width: 100%;
        height: 221px;
        border-radius: 20px;
        object-fit: fill;
        }
        .lineasdeproducto {
            width: 100%;
            height: auto;
            padding: 90px 30px;
            border-radius: 0px;
            background-position-x: 84%;
            background-size: cover;
            h2{
                font-size: 24px;
                line-height: 140%;
                letter-spacing: 3.6px;
            }
            p{
                font-size: 12px;
                line-height: 150%;
                letter-spacing: 0px;
            }
            .col-md-3.text-center {
            display: unset;
            }
            .jarra {
            margin-top: -93px;
            top: 0px;
            position: absolute;
            width: 100%;
            height: 131px;
            margin: 0 auto 0 auto;
            }
            .slider-prod {
            p {
                font-weight: 400;
                font-size: 12px;
                line-height: 150%;
                letter-spacing: 0px;
            }
            }
        }
    .mantenimiento {
        h2 {
            font-size: 24px;
            line-height: 140%;
            letter-spacing: 3.6px;
        }
        p {
            font-size: 16px;
            line-height: 150%;
            letter-spacing: 0px;
            padding: 0 15px;
        }
        .btn-naranja {
            width: 214px;
            height: 42px;
            padding: 10px 25px;
        }
    }
}
.share{
    padding: 240px 0;
    a{
        font-family: 'lato', sans-serif;
        font-weight: 400;
        font-size: 20px;
        line-height: 140%;
        letter-spacing: 2.6px;
    }
    p{
        font-family: 'Roboto', sans-serif;
        font-size: 12px;
        line-height: 120%;
        letter-spacing: 0px;
    }
    .halo-left {
        position: absolute;
        left: 0;
        top: unset;
        bottom: 0;
        width: 170px;
        height: 24%;
    }
    
    .halo-right {
        position: absolute;
        right: 0;
        bottom: unset;
        top: 0;
        width: 165px;
        height: 31%;
    }
}
    .h-180 {
    height: 90px;
    width: 100%;
    display: flex;
    justify-content: center;
    }
}