/*==================================================
    BODY
==================================================*/

body{
    margin:0;
    padding:0;
}

/*==================================================
    LISTAS
==================================================*/

ol,
ul{
    list-style:none;
}

/*==================================================
    CONTENEDOR IMÁGENES
==================================================*/

.contenedor-imagenes{
    display:flex;
    margin-left:400px;
}

.contenedor-imagenes img:first-child{
    margin-right:30px;
}

@media (max-width:500px){

    .contenedor-imagenes{
        margin-left:40px;
    }

}

/*==================================================
    PÁRRAFOS
==================================================*/

p{
    padding:0;
    color:#7189a9;
    font-size:18px;
    letter-spacing:2px;
    line-height:30px;
    text-align:left;
}

@media (max-width:500px){

    p{
        margin:10px 0;
        font-size:15px;
        line-height:22px;
    }

}

/*==================================================
    H1
==================================================*/

h1{
    margin:50px 0 0;
    color:#66cc33;
    font:900 30px 'Roboto', sans-serif;
    letter-spacing:3px;
    text-align:center;
}

@media (min-width:992px){

    h1{
        margin-top:150px;
        font-size:50px;
    }

}

@media (min-width:1200px){

    h1{
        font-size:50px;
    }

}/*==================================================
    H2
==================================================*/

h2{
    margin-top:10px;
    color:#999999;
    font-size:20px;
    font-weight:700;
    line-height:30px;
    letter-spacing:2px;
    text-align:center;
}

@media (max-width:500px){

    h2{
        margin:10px 5px 0;
        font-size:15px;
        line-height:22px;
    }

}

/*==================================================
    H3
==================================================*/

h3{
    margin-top:10px;
    color:#66cc33;
    font-size:20px;
    font-weight:700;
    line-height:35px;
    text-align:center;
}

@media (max-width:992px){

    h3{
        font-size:5px;
    }

}

@media (max-width:500px){

    h3{
        margin-top:10px;
        color:#66cc33;
        font-size:15px;
        line-height:22px;
        text-align:center;
    }

}

/*==================================================
    H4
==================================================*/

h4{
    padding:0;
    color:#7189a9;
    font-size:18px;
    letter-spacing:2px;
    line-height:30px;
    text-align:center;
}

@media (max-width:500px){

    h4{
        margin:0 5px 20px;
        font-size:15px;
        line-height:22px;
        text-align:left;
    }

}

/*==================================================
    H5
==================================================*/

h5{
    color:#666666;
    font:900 20px 'Roboto', sans-serif;
    letter-spacing:3px;
    line-height:35px;
    text-align:center;
}

@media (max-width:500px){

    h5{
        margin-top:15px;
        margin-left:10px;
        font-size:15px;
        letter-spacing:3px;
        line-height:22px;
        text-align:center;
    }

}/*==================================================
    TÍTULOS ESPECIALES
==================================================*/

.pad-bt1{
    margin:20px 0 0;
    padding:.5em;
    color:#cc66cc;
    font-size:25px;
    font-weight:900;
    letter-spacing:3px;
    line-height:35px;
    text-align:center;
    text-shadow:0 0 0 #fff;
}

@media (max-width:900px){

    .pad-bt1{
        margin-top:15px;
        padding:.5em;
        font-size:30px;
        text-shadow:0 0 0 #fff;
    }

}

@media (max-width:500px){

    .pad-bt1{
        margin-top:10px;
        padding:.5em;
        font-size:18px;
        line-height:30px;
        text-align:center;
        text-shadow:0 0 0 #fff;
    }

}


/*--------------------------------------------------
    PAD-BT2
--------------------------------------------------*/

@media (max-width:900px){

    .pad-bt2{
        margin-top:150px;
        font-size:35px;
    }

}

@media (max-width:500px){

    .pad-bt2{
        margin-top:50px;
        font-size:30px;
        line-height:30px;
        text-align:center;
    }

}


/*--------------------------------------------------
    PAD-BT3
--------------------------------------------------*/

@media (max-width:500px){

    .pad-bt3{
        margin-top:15px;
        margin-left:10px;
        font-size:15px;
        letter-spacing:3px;
        line-height:22px;
        text-align:center;
    }

}


/*--------------------------------------------------
    PAD-BT4
--------------------------------------------------*/

.pad-bt4{
    margin-top:5px;
    margin-bottom:0;
    color:#cc66cc;
    font-size:25px;
    font-weight:400;
    text-align:center;
}

@media (max-width:500px){

    .pad-bt4{
        margin-top:15px;
        margin-left:10px;
        font-size:15px;
        letter-spacing:3px;
        line-height:22px;
        text-align:left;
    }

}


/*--------------------------------------------------
    PAD-BT5
--------------------------------------------------*/

.pad-bt5{
    margin:5px 0;
    color:#999999;
    font-size:15px;
    font-weight:400;
    letter-spacing:2px;
    text-align:left;
}

@media (max-width:500px){

    .pad-bt5{
        margin-top:20px;
        margin-bottom:5px;
        color:#999999;
        font-size:15px;
        font-weight:400;
        letter-spacing:2px;
        line-height:20px;
        text-align:left;
    }

}


/*--------------------------------------------------
    PAD-BT25
--------------------------------------------------*/

.pad-bt25{
    margin:10px 0 20px;
    color:#66cc33;
    font-size:15px;
    font-weight:900;
    letter-spacing:3px;
    text-align:center;
}

@media (max-width:500px){

    .pad-bt25{
        text-align:left;
    }

}


/*--------------------------------------------------
    PAD-BT7
--------------------------------------------------*/

.pad-bt7{
    margin:5px 0;
    color:#ffffff;
    font-size:15px;
    font-weight:700;
    letter-spacing:3px;
    text-align:center;
}

@media (max-width:500px){

    .pad-bt7{
        margin:5px 0;
        font-size:10px;
        letter-spacing:3px;
        line-height:20px;
        text-align:center;
    }

}


/*--------------------------------------------------
    TEXTO
--------------------------------------------------*/

span3{
    color:#9681b6;
    font-size:18px;
    font-weight:900;
    line-height:30px;
}

strong{
    font-weight:900;
}


/*==================================================
    IMÁGENES
==================================================*/

.img-responsive{
    display:block;
    max-width:100%;
    height:auto;
    margin-bottom:5px;
    background:#ffffff;
    border:1px solid #888;
    border-radius:19px 19px 17px 18px;
    box-shadow:2px 2px 2px rgba(0,0,0,.8);
}

@media (max-width:600px){

    .img-responsive{
        margin-bottom:5px;
    }

}

@media only screen and (device-width:768px){

    .img-responsive{
        margin-left:0;
    }

    .img-responsive1{
        margin-left:0;
        margin-bottom:5px;
    }

}

@media only screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait){

    .img-responsive{
        margin-bottom:5px;
    }

}

@media only screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:landscape){

    .img-responsive{
        margin-bottom:5px;
    }

}
/*==================================================
    FONDOS
==================================================*/

.bg-light-gray{
    background:#f7f7f7;
}

.bg-darkest-gray{
    background:#222;
}


/*==================================================
    NAVBAR
==================================================*/

.navbar-default{
    background:rgba(255,255,255,.9);
    border-color:transparent;
}

.navbar-default .navbar-brand{
    background:transparent;
    font-family:'Roboto',sans-serif;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:active,
.navbar-default .navbar-brand.active{
    background:rgba(233,55,119,.9);
}

.navbar-default .navbar-collapse{
    background:transparent;
}

.navbar-default .navbar-toggle{
    background:#fed136;
    border-color:#fed136;
}

.navbar-default .navbar-toggle .icon-bar{
    background:#fff;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus{
    background:#fff;
}

.navbar-default .nav li a{
    color:#999999;
    font-size:15px;
    font-weight:900;
    letter-spacing:1px;
    text-transform:uppercase;
    text-shadow:0px 0px 0 #424242;
}

.navbar-default .nav li a:hover,
.navbar-default .nav li a:focus{
    color:#66cc33;
    font-weight:900;
    outline:0;
}

.navbar-default .navbar-nav>.active>a{
    color:#fff;
    background:#fed136;
    border-radius:0;
}

.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus{
    color:#fff;
    background:#fff;
}


/*==================================================
    NAVBAR DESKTOP
==================================================*/

@media (min-width:768px){

    .navbar-default{
        padding:25px 0;
        background:transparent;
        border:0;
        transition:padding .3s;
    }

    .navbar-default .navbar-brand{
        font-size:2em;
        transition:all .3s;
    }

    .navbar-default .navbar-nav>.active>a{
        border-radius:3px;
    }

    .navbar-default.navbar-shrink{
        height:30px;
        padding:10px 0;
        background:rgba(218,218,218,.9);
        box-shadow:1px 1px 1px #66cc33;
    }

    .navbar-default.navbar-shrink .navbar-brand{
        font-size:1.5em;
    }

    .navbar-default .nav li a{
        font-size:12px;
    }

}

@media (min-width:992px){

    .navbar-default .nav li a{
        font-size:10px;
    }

}

@media (min-width:1200px){

    .navbar-default .nav li a{
        font-size:15px;
    }

}


/*==================================================
    BOTONES
==================================================*/

.btn-warning{
    margin-bottom:20px;
    margin-left:120px;
    color:#fff;
    font-size:20px;
    background:#66cc33;
    border:ridge 1px #ccc;
}

.btn-primary{
    color:#fff;
    background:#cccc00;
    border-color:#2e6da4;
}

.btn-default{
    margin-top:20px;
    margin-left:290px;
    color:#66cc33;
    background:#e6e6e6;
    border-color:#66cc33;
}

@media (max-width:500px){

    .btn-default{
        margin-left:90px;
    }

}

.btn-block1{
    display:block;
    width:50%;
    margin-top:25px;
    margin-left:250px;
}


/*==================================================
    EFECTOS
==================================================*/

a:hover{
    filter:opacity(.6);
}

.img:hover{
    filter:blur(5px);
}/*==================================================
    BOTONES
==================================================*/

.btn-block{
    display:block;
    width:50%;
    margin:25px 0 0 380px;
}

@media (max-width:500px){

    .btn-block{
        width:90%;
        margin-left:20px;
    }

}

.btn-group-lg > .btn,
.btn-lg{
    font-size:15px;
}


/*==================================================
    ANIMACIONES
==================================================*/

.animated{
    animation-duration:2s;
    animation-fill-mode:both;
}

.animated.hinge{
    animation-duration:2s;
}


/*--------------------------------------------------
    Fade In Down Big
--------------------------------------------------*/

@keyframes fadeInDownBig{

    0%{
        opacity:0;
        transform:translateY(-2000px);
    }

    100%{
        opacity:1;
        transform:translateY(0);
    }

}

.fadeInDownBig{
    animation-name:fadeInDownBig;
}


/*--------------------------------------------------
    Fade In Left
--------------------------------------------------*/

@-webkit-keyframes fadeInLeft{

    0%{
        opacity:0;
        -webkit-transform:translateX(-20px);
        transform:translateX(-20px);
    }

    100%{
        opacity:1;
        -webkit-transform:translateX(0);
        transform:translateX(0);
    }

}


/*--------------------------------------------------
    Fade In Up Big
--------------------------------------------------*/

@keyframes fadeInUpBig{

    0%{
        opacity:0;
        transform:translateY(2000px);
    }

    100%{
        opacity:1;
        transform:translateY(0);
    }

}

.fadeInUpBig{
    animation-name:fadeInUpBig;
}


/*==================================================
    BARRA DE COOKIES
==================================================*/

#barraaceptacion{
    display:none;
    position:fixed;
    right:0;
    left:0;
    bottom:0;
    z-index:99999;
    width:100%;
    min-height:40px;
    padding-bottom:20px;
    color:#fff;
    text-align:center;
    background:rgba(102,102,102,.7);
}


/*--------------------------------------------------
    Responsive Cookies
--------------------------------------------------*/

@media screen and (min-width:320px) and (max-width:520px){

    #barraaceptacion{
        margin-bottom:20px;
        padding-bottom:100px;
    }

    inner{
        left:20px;
        right:20px;
        margin-bottom:205px;
    }

}


/*==================================================
    BOTÓN WARNING
==================================================*/

.btn-warning{
    margin:10px 0 10px;
    padding:10px 100px;
    color:#fff;
    font-size:18px;
    background:#66cc33;
    border:ridge 2px #ccc;
}

.btn-warning.active,
.btn-warning.focus,
.btn-warning:active,
.btn-warning:focus,
.btn-warning:hover,
.open > .dropdown-toggle.btn-warning{

    color:#fff;
    background:#999999;
    border-color:#66cc33;

}


/*--------------------------------------------------
    Responsive
--------------------------------------------------*/

@media screen and (min-width:320px) and (max-width:520px){

    .btn-warning{
        padding:10px 30px;
        font-size:15px;
    }

    inner{
        left:20px;
        right:20px;
        margin-bottom:205px;
    }

}/*==================================================
    BLOCKQUOTE
==================================================*/

blockquote{
    position:relative;
    display:block;
    padding-left:90px;
    color:rgba(254,82,76,1);
    font-size:22px;
    border-color:rgba(254,82,76,1);
}


/*==================================================
    VÍDEO RESPONSIVE
==================================================*/

.video-responsive{
    position:relative;
    overflow:hidden;
    height:0;
    padding-top:30px;      /* Compatibilidad con IE6 */
    padding-bottom:56.25%;
}

.video-responsive iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}


/*==================================================
    ELEMENTO PERSONALIZADO
==================================================*/

elemento{
    background:#666 !important;
    color:#fff !important;
    font-size:14px !important;
}


/*==================================================
    BARRA COOKIES
==================================================*/

#barraaceptacion{
    color:#fff;
    text-align:center;
}/*==================================================
    BOX-SIZING
==================================================*/

*::before,
*::after{
    box-sizing:border-box;
}


/*==================================================
    LISTAS GENERALES
==================================================*/

li{
    margin:5px 0;
    color:#999999;
    font-size:10px;
    font-weight:400;
    letter-spacing:2px;
    text-align:center;
}

@media (max-width:900px){

    li{
        margin-top:20px;
        padding:0;
        font-size:15px;
    }

}

@media (max-width:500px){

    li{
        margin-top:20px;
        padding:0;
        font-size:15px;
        text-align:center;
    }

}


/*==================================================
    LISTAS DE CONTENIDO
==================================================*/

ul{
    margin:25px 0;
    padding-left:28px;
    list-style:none;
}

ul li{
    position:relative;
    margin-bottom:12px;
    padding-left:5px;
    color:#996699;
    font-size:17px;
    font-weight:700;
    line-height:1.8;
}

ul li::before{
    position:absolute;
    top:0;
    left:0;
    color:#8B5A2B;
    font-size:16px;
    font-weight:400;
}

ul li strong{
    color:#66cc33;
}

ul li:last-child{
    margin-bottom:0;
}/*==================================================
    CAJA
==================================================*/

.box{
    width:100%;
    height:auto;
    margin:20px auto 40px;
    padding:5px 20px;
    background:#333333;
}


/*==================================================
    FIGURE
==================================================*/

figure{
    width:100%;
    max-width:600px;
    margin:0 auto;
}

figure video{
    display:block;
    width:100%;
    height:auto;
}

figure figcaption{
    margin-top:.75rem;
    padding:0 .5rem;
    color:#99cc66;
    font-size:1.7rem;
    font-weight:900;
    line-height:1.5;
    text-align:center;
}


/*--------------------------------------------------
    Responsive
--------------------------------------------------*/

@media (max-width:768px){

    figure figcaption{
        padding:0 1rem;
        font-size:.95rem;
        line-height:1.4;
    }

}

@media (max-width:480px){

    figure figcaption{
        font-size:1.2rem;
    }

}


/*==================================================
    SEPARADOR
==================================================*/

.separator{
    width:100%;
    max-width:1200px;
    height:1px;
    margin:4rem auto;
    background:linear-gradient(
        to right,
        transparent,
        #996699,
        transparent
    );
}


/*==================================================
    CARACTERÍSTICAS CENADORES DOS AGUAS
==================================================*/

.caracteristicas-cenador{
    margin:50px 0;
}

.caracteristicas-cenador h2{
    margin-bottom:25px;
    color:#2f2f2f;
    font-size:34px;
    font-weight:700;
    line-height:1.3;
}

.caracteristicas-cenador h3{
    margin:35px 0 20px;
    color:#444;
    font-size:26px;
    font-weight:600;
}

.caracteristicas-cenador p{
    margin-bottom:20px;
    color:#555;
    font-size:18px;
    line-height:1.9;
    text-align:justify;
}

.caracteristicas-cenador strong{
    color:#222;
    font-weight:700;
}

.caracteristicas-cenador ul{
    margin:30px 0;
    padding:0;
    list-style:none;
}

.caracteristicas-cenador li{
    position:relative;
    padding:16px 0 16px 42px;
    color:#555;
    font-size:18px;
    line-height:1.8;
    border-bottom:1px solid #e5e5e5;
}

.caracteristicas-cenador li:last-child{
    border-bottom:none;
}

.caracteristicas-cenador li::before{
    content:"?";
    position:absolute;
    top:15px;
    left:0;
    color:#3c7d2b;
    font-size:22px;
    font-weight:bold;
}

.caracteristicas-cenador li strong{
    color:#222;
}


/*--------------------------------------------------
    Responsive
--------------------------------------------------*/

@media (max-width:991px){

    .caracteristicas-cenador h2{
        font-size:30px;
    }

    .caracteristicas-cenador h3{
        font-size:24px;
    }

    .caracteristicas-cenador p,
    .caracteristicas-cenador li{
        font-size:17px;
    }

}

@media (max-width:767px){

    .caracteristicas-cenador{
        margin:35px 0;
    }

    .caracteristicas-cenador h2{
        font-size:26px;
    }

    .caracteristicas-cenador h3{
        font-size:22px;
    }

    .caracteristicas-cenador p{
        font-size:16px;
        text-align:left;
    }

    .caracteristicas-cenador li{
        padding-left:35px;
        font-size:16px;
    }

    .caracteristicas-cenador li::before{
        top:16px;
        font-size:18px;
    }

}

/*==================================================
    FIN CARACTERÍSTICAS CENADORES DOS AGUAS
==================================================*/
/*==================================================
    FAQ CENADORES PREMIUM 2026
==================================================*/

.faq-cenadores{
    max-width:1200px;
    margin:90px auto;
    padding:0 25px;
}

.faq-cenadores > h2{
    margin-bottom:20px;
    text-align:center;
}

.faq-cenadores > p{
    max-width:1200px;
    margin:0 auto 60px;
    font-size:1.48rem;
    line-height:1.8;
    text-align:center;
}


/*==================================================
    BLOQUE FAQ
==================================================*/

.faq-item{
    margin-bottom:35px;
    padding:35px;
    background:#fff;
    border:1px solid #e6e6e6;
    border-radius:18px;
    transition:.3s ease;
}

.faq-item:hover{
    border-color:#cfcfcf;
    transform:translateY(-2px);
}

.faq-item h3{
    margin:0 0 25px;
    color:#a9a4a4;
    font-size:1.95rem;
    line-height:1.3;
}


/*==================================================
    TEXTO + IMAGEN
==================================================*/

.faq-flex{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:45px;
}

.faq-texto{
    flex:1;
}

.faq-texto p{
    margin:0;
    font-size:1.68rem;
    line-height:1.9;
    text-align:justify;color:#cc66cc;
}

.faq-texto strong{
    color:inherit;
    font-weight:700;
}


/*==================================================
    IMAGEN
==================================================*/

.faq-imagen{
    flex:0 0 40%;
}

.faq-imagen img{
    display:block;
    width:100%;
    height:auto;
    object-fit:cover;
    border-radius:14px;
}


/*==================================================
    TABLET
==================================================*/

@media (max-width:991px){

    .faq-item{
        padding:28px;
    }

    .faq-flex{
        gap:30px;
    }

    .faq-item h3{
        font-size:1.55rem;
    }

}


/*==================================================
    MÓVIL
==================================================*/

@media (max-width:768px){

    .faq-cenadores{
        margin:60px auto;
        padding:0 18px;
    }

    .faq-item{
        padding:22px;
        border-radius:14px;
    }

    .faq-flex{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:22px;
    }

    .faq-texto{
        order:1;
    }

    .faq-imagen{
        order:2;
        flex:none;
        width:100%;
    }

    .faq-item h3{
        margin-bottom:20px;
        font-size:1.35rem;
        text-align:center;
    }

    .faq-texto p{
        font-size:1.4rem;
        line-height:2.0;
        text-align:left;
    }

}


/*==================================================
    PANTALLAS GRANDES
==================================================*/

@media (min-width:1400px){

    .faq-cenadores{
        max-width:1280px;
    }

    .faq-item{
        padding:42px;
    }

    .faq-item h3{
        font-size:1.9rem;
    }

    .faq-texto p{
        font-size:1.80rem;
    }

}


/*==================================================
    INTRO FAQ
==================================================*/

.faq-intro{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:40px;
    margin-bottom:50px;
}

.faq-intro-img{
    flex:0 0 260px;
}

.faq-intro-img img{
    display:block;
    width:100%;
    border-radius:18px;
    box-shadow:0 12px 30px rgba(0,0,0,.15);
}

.faq-intro-texto{
    flex:1;
    max-width:720px;
    text-align:center;
}

@media (max-width:992px){

    .faq-intro{
        flex-direction:column;
        gap:25px;
    }

    .faq-intro-img{
        width:100%;
        max-width:420px;
    }

}

.zonas-instalacion .panel-body p a{
    color:#5f8f2f;
    font-weight:700;
    text-decoration:none;
    border-bottom:2px solid rgba(95,143,47,.35);
    transition:.25s ease;
    padding-bottom:1px;
}

.zonas-instalacion .panel-body p a:hover{
    color:#3f631f;
    border-bottom-color:#3f631f;
}


html,
body{
    overflow-x:hidden;
}