/* Estilo general */
body {
    padding-top: 60px; /* espacio por navbar fijo */
    color: #333;
    font-family: "Roboto", sans-serif;
}

/* Navbar */
.navbar-aysa {
    background-color: #0077c8; /* azul AySA aproximado */
    border: none;
}
.navbar-aysa .navbar-brand,
.navbar-aysa .navbar-nav > li > a {
    color: #fff;
}
.navbar-aysa .navbar-nav > li > a:hover,
.navbar-aysa .navbar-nav > li.active > a {
    background-color: #33afe2;
    color: #fff;
}
.brand-badge {
    background: #fff;
    color: #0077c8;
    font-weight: 700;
    border-radius: 8px;
    padding: 6px 10px;
    display: inline-block;
}

.text-center_1{
    font-size: 26px;
    text-align: center;
    color: #009bdb;
    }

.text-center{
    font-size: 18px;
    }
/* Hero */
.hero {
    position: relative;
}
.hero-img {
    width: 100%;
    height: auto;
    display: block;
}
.hero-overlay {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.15) 100%);
    color: #fff;
    display: flex;
    align-items: center;
}
.hero-title {
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 10px;
}
.hero-subtitle {
    font-size: 18px;
    margin: 0;
}
@media (max-width: 767px) {
    .hero-title { font-size: 26px; }
    .hero-subtitle { font-size: 18px; }
}

/* Intro */
.section-intro {
    padding: 30px 0;
}

/* Recuadro celeste */
.section-cta {
    padding: 10px 0 30px;
}
.cta-box_1 {
    background: #009bdb;
    color: #fff;           /* texto en blanco como en la referencia */
    padding: 18px;
    border-radius: 8px 8px 0 0;  /* esquinas superiores redondeadas */
    margin-left: 15px;
    margin-right: 15px;
    text-align: center;
}
.cta-box {
    background: #DEEAF9;
    color: #4a4a4a;
    padding: 20px;
    border: 1px solid #cfe0f5;   /* borde suave */
    border-top: none;             /* se integra con el encabezado azul */
    border-radius: 0 0 8px 8px;   /* esquinas inferiores redondeadas */
    box-shadow: 0 2px 6px rgba(0,0,0,0.06); /* ligera sombra como en la imagen */
    margin-left: 15px;
    margin-right: 15px;
}
.cta-title {
    margin-top: 0;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    line-height: 1.5;             /* mejor legibilidad en varias líneas */
}
.cta-subtitle {
    margin-bottom: 15px;
}
.cta-list > li { margin-bottom: 10px; color: #009bdb;}
.cta-list ul { margin-top: 8px; }

/* Secciones ancla */
.section-anchor {
    padding: 40px 0;
}
.section-anchor.alt {
    background: #f7f7f7;
}
.section-anchor h2 {
    margin-top: 0;
}

/* Footer */
.footer {
    background: #f0f0f0;
    padding: 20px 0;
    margin-top: 20px;
}

/* Canillas - segunda parte */
.canillas-title-main {
    color: #0077c8;
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 5px;
}
.canillas-title-sub {
    color: #00a1de;
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 15px;
}
.canillas-desc {
    max-width: 900px;
    margin: 0 auto 15px;
}
.canillas-figure { margin: 20px 0; }
.alert-water-loss {
    width: 100%;
    display: inline-block;
    border: 2px solid #ff6a00;
    background: #fff9f3;
    color: #ff6a00;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 4px;
    margin-top: 10px;
}

.alert-icon{
    width: 70px;
    }

/* Arreglos más comunes */
.fixes-title {
    color: #00a1de;
    font-size: 24px;
    font-weight: 700;
    margin: 25px 0 15px;
}
.fixes-grid { margin-bottom: 20px; }
.fix-card {
    background: #f6f8f9;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 15px;
    min-height: 180px;
}
.fix-card .fix-img img { max-height: 100px; }
.fix-card-title {
    color: #0077c8;
    font-weight: 700;
    margin: 10px 0 8px;
    font-size: 18px;
}
.fix-card.featured { border: 2px solid #00a1de; }
.btn-download {
    background: #00a1de;
    border-color: #00a1de;
    font-weight: 700;
}
.btn-download:hover {
    background: #008fc2;
    border-color: #008fc2;
}

/* Depósitos de inodoro */
.deposit-title-main {
    margin-top: 35px !important;
    color: #00a1de;
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 12px;
}
.deposit-lead {
    max-width: 900px;
    margin: 0 auto 15px;
    font-size: 18px !important;
}
.deposit-grid { margin-top: 50px; }
.deposit-text {
    font-size: 18px;
    line-height: 1.6;
    margin-top: 10px;
}
.deposit-figure img { max-width: 100%; }
/* Recuadro naranja del depósito */
.deposit-alert {
    border: 2px solid #ff6a00;
    background: #fff9f3;
    color: #ff6a00;
    font-weight: 700;
    padding: 12px 18px;
    border-radius: 4px;
    margin: 18px auto 0;
    max-width: 900px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 12px;
}
.deposit-alert .icon { width: 36px; height: auto; }
.deposit-alert .text { line-height: 1.4; }

@media (max-width: 767px) {
    .deposit-title-main { font-size: 22px; }
    .deposit-figure img { max-width: 100%; }
    .deposit-text { margin-top: 12px; }
    .deposit-fix-card { margin-bottom: 15px; }
}
@media (max-width: 767px) {
    .canillas-title-main { font-size: 24px; }
    .canillas-title-sub { font-size: 22px; }
    .fix-card { margin-bottom: 15px; }
}
/* Arreglos más comunes (depósito) */
.deposit-fixes-title {
    color: #00a1de;
    font-size: 24px;
    font-weight: 700;
    margin: 25px 0 15px;
}
.deposit-fixes-grid { margin-bottom: 20px; }
.deposit-fix-card {
    background: #f6f8f9;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 15px;
    min-height: 180px;
}
.deposit-fix-card .deposit-fix-img img { max-height: 100px; }
.deposit-fix-card-title {
    color: #00a1de;
    font-weight: 700;
    margin: 10px 0 8px;
    font-size: 18px;
}
.deposit-fix-card.featured { border: 2px solid #00a1de; }
.deposit-btn-download {
    background: #00a1de;
    border-color: #00a1de;
    font-weight: 700;
}
.deposit-btn-download:hover {
    background: #008fc2;
    border-color: #008fc2;
}

@media (max-width: 767px) {
    .deposit-title-main { font-size: 22px; }
    .deposit-figure img { max-width: 100%; }
    .deposit-text { margin-top: 12px; }
    .deposit-fix-card { margin-bottom: 15px; }
}

/* Conexiones de artefactos */
.conn-title-main {
    color: #00a1de;
    font-size: 26px;
    font-weight: 700;
    text-decoration: underline;
    margin: 0 0 12px;
}
.conn-lead {
    max-width: 900px;
    margin: 0 auto 15px;
}
.conn-grid { margin-top: 10px; }
.conn-text { font-size: 18px; line-height: 1.6; }
.conn-figure img { max-height: 220px; }

/* Caja informativa azul */
.conn-info-box {
    background: #0077c8;
    color: #fff;
    border-radius: 4px;
    padding: 18px;
    font-weight: 700;
    margin-top: 12px;
}

/* Recuadro naranja conexiones */
.conn-alert {
    border: 2px solid #ff6a00;
    background: #fff9f3;
    color: #ff6a00;
    font-weight: 700;
    padding: 12px 18px;
    border-radius: 4px;
    margin: 18px auto 0;
    max-width: 900px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 12px;
}
.conn-alert .icon { width: 36px; height: auto; }
.conn-alert .text { line-height: 1.4; }

@media (max-width: 767px) {
    .conn-title-main { font-size: 22px; }
    .conn-figure img { max-height: 180px; }
    .conn-text, .conn-info-box { margin-top: 12px; }
    .conn-fix-card { margin-bottom: 15px; }
}
/* Arreglos más comunes (conexiones) */
.conn-fixes-title {
    color: #00a1de;
    font-size: 24px;
    font-weight: 700;
    margin: 25px 0 15px;
}
.conn-fixes-grid { margin-bottom: 20px; }
.conn-fix-card {
    background: #f6f8f9;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 18px;
    min-height: 180px;
    /* imagen a la izquierda, texto a la derecha */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 18px;
}
.conn-fix-img {
    flex: 0 0 140px;      /* ancho fijo para el bloque de imagen */
    max-width: 140px;
}
.conn-fix-card .conn-fix-img img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 110px;    /* proporción similar a la referencia */
}
.conn-fix-content { flex: 1; }
.conn-fix-card-title {
    color: #00a1de;
    font-weight: 700;
    margin: 0 0 8px;
    font-size: 18px;
}
/* Borde azul solo en la imagen del PRIMER recuadro */
.conn-fixes-grid .col-sm-6:first-child .conn-fix-img {
    border: 2px solid #00a1de;
    border-radius: 4px;
    padding: 8px;
    background: #fff;
}
/* ya no aplicamos borde azul a todo el card del segundo recuadro */
.conn-fix-card.featured { border: 1px solid #e5e5e5; }

/* botón */
.conn-btn-download {
    background: #00a1de;
    border-color: #00a1de;
    font-weight: 700;
}
.conn-btn-download:hover {
    background: #008fc2;
    border-color: #008fc2;
}

@media (max-width: 767px) {
    .conn-title-main { font-size: 22px; }
    .conn-figure img { max-height: 180px; }
    .conn-text, .conn-info-box { margin-top: 12px; }
    .conn-fix-card { display: block; }   /* apilar en móvil */
    .conn-fix-img { max-width: none; margin-bottom: 10px; }
    .conn-fix-card { margin-bottom: 15px; }
}

/* Cañería dañada */
.pipe-title-main {
    color: #00a1de;
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 12px;
}
.pipe-lead {
    max-width: 900px;
    margin: 0 auto 15px;
}
.pipe-grid { margin-top: 10px; }
.pipe-figure img { max-height: 220px; }

/* Caja informativa azul (derecha) */
.pipe-info-box {
    background: #0077c8;
    color: #fff;
    border-radius: 4px;
    padding: 18px;
    font-weight: 700;
    margin-top: 12px;
}

/* Recuadro naranja cañerías */
.pipe-alert {
    border: 2px solid #ff6a00;
    background: #fff9f3;
    color: #ff6a00;
    font-weight: 700;
    padding: 12px 18px;
    border-radius: 4px;
    margin: 18px auto 0;
    max-width: 900px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 12px;
}
.pipe-alert .icon { width: 36px; height: auto; }
.pipe-alert .text { line-height: 1.4; }

/* Botón cañerías */
.pipe-btn-download {
    background: #00a1de;
    border-color: #00a1de;
    font-weight: 700;
}
.pipe-btn-download:hover {
    background: #008fc2;
    border-color: #008fc2;
}

@media (max-width: 767px) {
    .pipe-title-main { font-size: 22px; }
    .pipe-figure img { max-height: 180px; }
    .pipe-info-box { margin-top: 12px; }
}

/* Ajustes de tipografía base para mejor lectura en diferentes pantallas */
body { font-size: 18px; }
@media (max-width: 767px) {
    body { font-size: 15px; }
    .hero-title { font-size: 26px; }
    .hero-subtitle { font-size: 18px; }
}

/* Mejoras generales de responsividad de imágenes y espaciados */
.img-responsive { 
    display: block; 
    max-width: 100%; 
    height: auto; 
    margin-top: 0;                /* sin margen superior para alinear con títulos y cajas */
}
.section-anchor { padding: 40px 0; }
@media (max-width: 767px) {
    .section-anchor { padding: 24px 0; }
    .cta-box { padding: 18px; }
    .cta-title { font-size: 18px; }
    .cta-subtitle { font-size: 15px; }
}

/* Canillas */
.canillas-title-main { font-size: 30px; }
.canillas-title-sub  { font-size: 26px; }
@media (max-width: 767px) {
    .canillas-title-main { font-size: 24px; }
    .canillas-title-sub  { font-size: 22px; }
    .canillas-figure picture {
        display: block;
    }
    .canillas-figure img { max-width: 100%; }
}

/* Depósitos */
.deposit-figure img { max-width: 100%; }
@media (max-width: 767px) {
    .deposit-figure img { max-width: 100%; }
}

/* Conexiones: tarjetas con imagen a la izquierda y texto a la derecha */
.conn-fix-card {
    background: #f6f8f9;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 18px;
    min-height: 180px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 18px;
}
.conn-fix-img { flex: 0 0 140px; max-width: 140px; }
.conn-fix-card .conn-fix-img img { width: 100%; height: auto; max-height: 110px; }
.conn-fix-content { flex: 1; }
@media (min-width: 992px) {
    .conn-fix-img { flex-basis: 160px; max-width: 160px; }
    .conn-fix-card .conn-fix-img img { max-height: 120px; }
}
@media (max-width: 767px) {
    .conn-fix-card { display: block; }
    .conn-fix-img { max-width: none; margin-bottom: 10px; }
    .conn-fix-card { margin-bottom: 15px; }
}

/* Borde azul solo en imagen del primer recuadro de conexiones */
.conn-fixes-grid .col-sm-6:first-child .conn-fix-img {
    border: 2px solid #00a1de;
    border-radius: 4px;
    padding: 8px;
    background: #fff;
}

/* Caja info azul y recuadros naranjas */
.conn-info-box,
.pipe-info-box {
    background: #0077c8;
    color: #fff;
    border-radius: 4px;
    padding: 18px;
    font-weight: 700;
}
.conn-alert, .deposit-alert, .pipe-alert {
    border: 2px solid #ff6a00;
    background: #fff9f3;
    color: #ff6a00;
    font-weight: 700;
    padding: 12px 18px;
    border-radius: 4px;
    margin: 18px auto 0;
    max-width: 900px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 12px;
}
.conn-alert .icon,
.deposit-alert .icon,
.pipe-alert .icon { width: 36px; height: auto; }

/* Botones de descarga: consistentes en todas las secciones */
.btn-download,
.deposit-btn-download,
.conn-btn-download,
.pipe-btn-download {
    margin-top: 15px;;
    width: 100%;
    background: #00a1de;
    border-color: #00a1de;
    font-weight: 700;
    text-align: center;      /* centra el texto */
    white-space: normal;     /* habilita salto de línea */
    line-height: 1.4;        /* mejor legibilidad en multilinea */
    padding: 12px 18px;      /* padding consistente */
}
.btn-download:hover,
.deposit-btn-download:hover,
.conn-btn-download:hover,
.pipe-btn-download:hover {
    background: #008fc2;
    border-color: #008fc2;
}   



/* ******************************************************************** */
.navbar {
    min-height: 80px !important;  /* coincide con la barra de navegación de la referencia */
}
.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
        margin-top: -5px !important;
}
.navbar-right {
        padding-top: 15px;
}
ol, ul {
    margin-top: 30px;
}    

li {
    line-height: 30px;
}
/* Forzar imagen a la izquierda y texto a la derecha en la sección Canillas */
#canillas .can-fix-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 18px;
}

#canillas .can-fix-media {
    flex: 0 0 120px;     /* ancho fijo para el bloque de imagen */
    max-width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#canillas .can-fix-img {
    width: 100%;
    height: auto;
    max-height: 120px;
    display: block;
    object-fit: contain;
}

#canillas .can-fix-body {
    flex: 1 1 auto;
}

/* En móvil: centrar imagen y apilar vertical en Canillas */
@media (max-width: 767px) {
    #canillas .can-fix-card {
        display: block;
        padding: 18px;
        min-height: auto;
    }
    #canillas .can-fix-media {
        max-width: 180px;
        margin: 0 auto 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #canillas .can-fix-img {
        display: block;
        width: 100%;
        height: auto;
    }
    #canillas .can-fix-body {
        text-align: left;
    }
}
/* Arreglos más comunes (Canillas) */
.can-fixes-grid { margin-bottom: 20px; }

.can-fix-card {
    background: #f6f8f9;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 18px;
    min-height: 180px;
    /* Alert de Canillas: icono a la izquierda, 100% del container y responsive */
    #canillas .alert-water-loss {
        width: 100%;              /* ocupa todo el ancho de la columna dentro del container */
        box-sizing: border-box;   /* incluye padding y borde dentro del ancho */
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        padding: 14px 18px;
        border: 2px solid #f26334;
        border-radius: 4px;
        background: #fff7f0;      /* leve crema como en la referencia */
        text-align: left;         /* sobreescribe .text-center */
        color: #5f6b76;
        margin: 0 0 24px;         /* separación inferior del título siguiente */
    }
    
    #canillas .alert-water-loss .alert-icon {
        flex: 0 0 32px;           /* tamaño del ícono a la izquierda */
        width: 32px;
        height: auto;
        display: block;
    }
    
    #canillas .alert-water-loss .alert-copy {
        font-size: 18px;
        line-height: 1.5;
    }
    #canillas .alert-water-loss .alert-copy strong {
        color: #f26334;
        font-weight: 700;
    }
    
    /* Responsive: reduce levemente en móviles */
    @media (max-width: 767px) {
        #canillas .alert-water-loss {
            padding: 12px 14px;
            gap: 10px;
        }
        #canillas .alert-water-loss .alert-icon {
            flex-basis: 28px;
            width: 28px;
        }
        #canillas .alert-water-loss .alert-copy {
            font-size: 15px;
            line-height: 1.45;
        }
    }
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 18px;
}
.can-fix-img {
    flex: 0 0 140px;               /* ancho fijo del bloque de imagen */
    max-width: 140px;
}
.can-fix-card .can-fix-img img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 110px;             /* proporción similar a la referencia */
}
.can-fix-content { flex: 1; }
.can-fix-card-title {
    color: #00a1de;                /* título celeste, como en la imagen */
    font-weight: 700;
    margin: 0 0 8px;
    font-size: 18px;
}

@media (min-width: 992px) {
    .can-fix-img { flex-basis: 160px; max-width: 160px; }
    .can-fix-card .can-fix-img img { max-height: 120px; }
}
@media (max-width: 767px) {
    .can-fix-card { display: block; }   /* apilar en móvil */
    .can-fix-img { max-width: none; margin-bottom: 10px; }
}

/* Arreglos del Depósito (cards #F5F5F5) */
.deposit-fixes-grid { margin-top: 12px; }

.deposit-fix-card {
    background: #F5F5F5;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    padding: 18px;
}

/* Card con imagen a la izquierda (desktop) */
.deposit-left {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}
.deposit-left .deposit-fix-media {
    flex: 0 0 140px;
    max-width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.deposit-fix-img {
    display: block;
    width: 100%;
    height: auto;
}

/* Card con imagen arriba del título y texto */
.deposit-top {
    display: block;
}
.deposit-top .deposit-fix-media-top {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

/* Tipografía dentro de las cards */
.deposit-fix-title {
    color: #00a1de;
    font-weight: 700;
    font-size: 20px;
    margin: 0 0 6px;
}
.deposit-fix-text {
    color: #6b7785;
    font-size: 18px;
    line-height: 1.55;
    margin: 0;
}

/* Responsive: apilar y centrar imágenes en móvil */
@media (max-width: 767px) {
    .deposit-left {
        display: block;                 /* imagen arriba y texto debajo en móvil */
    }
    .deposit-left .deposit-fix-media {
        max-width: 180px;
        margin: 0 auto 12px;            /* centrar imagen en móvil */
    }
    .deposit-top .deposit-fix-media-top {
        margin-bottom: 12px;
    }
}
@media (max-width: 767px) {
    .canillas-title-main { font-size: 24px; }
    .canillas-title-sub { font-size: 22px; }
    .fix-card { margin-bottom: 15px; }
}
/* Arreglos más comunes (conexiones) */
.conn-fixes-title {
    color: #00a1de;
    font-size: 24px;
    font-weight: 700;
    margin: 25px 0 15px;
}
.conn-fixes-grid { margin-bottom: 20px; }
.conn-fix-card {
    background: #f6f8f9;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 18px;
    min-height: 180px;
    /* imagen a la izquierda, texto a la derecha */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 18px;
}
.conn-fix-img {
    flex: 0 0 140px;      /* ancho fijo para el bloque de imagen */
    max-width: 140px;
}
.conn-fix-card .conn-fix-img img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 110px;    /* proporción similar a la referencia */
}
.conn-fix-content { flex: 1; }
.conn-fix-card-title {
    color: #00a1de;
    font-weight: 700;
    margin: 0 0 8px;
    font-size: 18px;
}
/* Borde azul solo en la imagen del PRIMER recuadro */
.conn-fixes-grid .col-sm-6:first-child .conn-fix-img {
    border: 2px solid #00a1de;
    border-radius: 4px;
    padding: 8px;
    background: #fff;
}
/* ya no aplicamos borde azul a todo el card del segundo recuadro */
.conn-fix-card.featured { border: 1px solid #e5e5e5; }

/* botón */
.conn-btn-download {
    background: #00a1de;
    border-color: #00a1de;
    font-weight: 700;
}
.conn-btn-download:hover {
    background: #008fc2;
    border-color: #008fc2;
}

@media (max-width: 767px) {
    .conn-title-main { font-size: 22px; }
    .conn-figure img { max-height: 180px; }
    .conn-text, .conn-info-box { margin-top: 12px; }
    .conn-fix-card { display: block; }   /* apilar en móvil */
    .conn-fix-img { max-width: none; margin-bottom: 10px; }
    .conn-fix-card { margin-bottom: 15px; }
}

/* Cañería dañada */
.pipe-title-main {
    color: #00a1de;
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 12px;
}
.pipe-lead {
    max-width: 900px;
    margin: 0 auto 15px;
}
.pipe-grid { margin-top: 10px; }
.pipe-figure img { max-height: 220px; }

/* Caja informativa azul (derecha) */
.pipe-info-box {
    background: #0077c8;
    color: #fff;
    border-radius: 4px;
    padding: 18px;
    font-weight: 700;
    margin-top: 12px;
}

/* Recuadro naranja cañerías */
.pipe-alert {
    border: 2px solid #ff6a00;
    background: #fff9f3;
    color: #ff6a00;
    font-weight: 700;
    padding: 12px 18px;
    border-radius: 4px;
    margin: 18px auto 0;
    max-width: 900px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 12px;
}
.pipe-alert .icon { width: 36px; height: auto; }
.pipe-alert .text { line-height: 1.4; }

/* Botón cañerías */
.pipe-btn-download {
    background: #00a1de;
    border-color: #00a1de;
    font-weight: 700;
}
.pipe-btn-download:hover {
    background: #008fc2;
    border-color: #008fc2;
}

@media (max-width: 767px) {
    .pipe-title-main { font-size: 22px; }
    .pipe-figure img { max-height: 180px; }
    .pipe-info-box { margin-top: 12px; }
}

/* Ajustes de tipografía base para mejor lectura en diferentes pantallas */
body { font-size: 18px; }
@media (max-width: 767px) {
    body { font-size: 15px; }
    .hero-title { font-size: 26px; }
    .hero-subtitle { font-size: 18px; }
}

/* Mejoras generales de responsividad de imágenes y espaciados */
.img-responsive { 
    display: block; 
    /*width: 100%; */
    height: auto; 
    margin-top: 0;                /* sin margen superior para alinear con títulos y cajas */
}
.section-anchor { padding: 40px 0; }
@media (max-width: 767px) {
    .section-anchor { padding: 24px 0; }
    .cta-box { padding: 18px; }
    .cta-title { font-size: 18px; }
    .cta-subtitle { font-size: 15px; }
}

/* Canillas */
.canillas-title-main { font-size: 30px; }
.canillas-title-sub  { font-size: 26px; }
@media (max-width: 767px) {
    .canillas-title-main { font-size: 24px; }
    .canillas-title-sub  { font-size: 22px; }
    .canillas-figure picture {
        display: block;
    }
    .canillas-figure img { max-width: 100%; }
}

/* Depósitos */
.deposit-figure img { max-width: 100%; }
@media (max-width: 767px) {
    .deposit-figure img { max-width: 100%; }
}

/* Conexiones: tarjetas con imagen a la izquierda y texto a la derecha */
.conn-fix-card {
    background: #f6f8f9;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 18px;
    min-height: 180px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 18px;
}
.conn-fix-img { flex: 0 0 140px; max-width: 140px; }
.conn-fix-card .conn-fix-img img { width: 100%; height: auto; max-height: 110px; }
.conn-fix-content { flex: 1; }
@media (min-width: 992px) {
    .conn-fix-img { flex-basis: 160px; max-width: 160px; }
    .conn-fix-card .conn-fix-img img { max-height: 120px; }
}
@media (max-width: 767px) {
    .conn-fix-card { display: block; }
    .conn-fix-img { max-width: none; margin-bottom: 10px; }
    .conn-fix-card { margin-bottom: 15px; }
}

/* Borde azul solo en imagen del primer recuadro de conexiones */
.conn-fixes-grid .col-sm-6:first-child .conn-fix-img {
    border: 2px solid #00a1de;
    border-radius: 4px;
    padding: 8px;
    background: #fff;
}

/* Caja info azul y recuadros naranjas */
.conn-info-box,
.pipe-info-box {
    background: #0077c8;
    color: #fff;
    border-radius: 4px;
    padding: 18px;
    font-weight: 700;
}
.conn-alert, .deposit-alert, .pipe-alert {
    border: 2px solid #ff6a00;
    background: #fff9f3;
    color: #ff6a00;
    font-weight: 700;
    padding: 12px 18px;
    border-radius: 4px;
    margin: 18px auto 0;
    max-width: 900px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 12px;
}
.conn-alert .icon,
.deposit-alert .icon,
.pipe-alert .icon { width: 36px; height: auto; }

/* Botones de descarga: consistentes en todas las secciones */
.btn-download,
.deposit-btn-download,
.conn-btn-download,
.pipe-btn-download {
    background: #00a1de;
    border-color: #00a1de;
    font-weight: 700;
    text-align: center;      /* centra el texto */
    white-space: normal;     /* habilita salto de línea */
    line-height: 1.4;        /* mejor legibilidad en multilinea */
    padding: 12px 18px;      /* padding consistente */
}
.btn-download:hover,
.deposit-btn-download:hover,
.conn-btn-download:hover,
.pipe-btn-download:hover {
    background: #008fc2;
    border-color: #008fc2;
}   



/* ******************************************************************** */
.navbar {
    min-height: 80px !important;  /* coincide con la barra de navegación de la referencia */
}
.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
        margin-top: -5px !important;
}
.navbar-right {
        padding-top: 15px;
}
ol, ul {
    margin-top: 30px;
}    

li {
    line-height: 30px;
}
/* Forzar imagen a la izquierda y texto a la derecha en la sección Canillas */
#canillas .can-fix-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 18px;
}

#canillas .can-fix-media {
    flex: 0 0 120px;     /* ancho fijo para el bloque de imagen */
    max-width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#canillas .can-fix-img {
    width: 100%;
    height: auto;
    max-height: 120px;
    display: block;
    object-fit: contain;
}

#canillas .can-fix-body {
    flex: 1 1 auto;
}

/* En móvil: centrar imagen y apilar vertical en Canillas */
@media (max-width: 767px) {
    #canillas .can-fix-card {
        display: block;
        padding: 18px;
        min-height: auto;
    }
    #canillas .can-fix-media {
        max-width: 180px;
        margin: 0 auto 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #canillas .can-fix-img {
        display: block;
        width: 100%;
        height: auto;
    }
    #canillas .can-fix-body {
        text-align: left;
    }
}
/* Arreglos más comunes (Canillas) */
.can-fixes-title {
    color: #00a1de;
    font-weight: 700;
    margin: 50px 0 15px;
}
.can-fixes-grid { margin-bottom: 20px; }

.can-fix-card {
    background: #f6f8f9;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 18px;
    min-height: 180px;
    /* Alert de Canillas: icono a la izquierda, 100% del container y responsive */
    #canillas .alert-water-loss {
        width: 100% !important;              /* ocupa todo el ancho de la columna dentro del container */
        box-sizing: border-box;   /* incluye padding y borde dentro del ancho */
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        padding: 14px 18px;
        border: 2px solid #f26334;
        border-radius: 4px;
        background: #fff7f0;      /* leve crema como en la referencia */
        text-align: left;         /* sobreescribe .text-center */
        color: #5f6b76;
        margin: 0 0 24px;         /* separación inferior del título siguiente */
    }
    
    #canillas .alert-water-loss .alert-icon {
        flex: 0 0 32px;           /* tamaño del ícono a la izquierda */
        width: 32px;
        height: auto;
        display: block;
    }
    
    #canillas .alert-water-loss .alert-copy {
        font-size: 18px;
        line-height: 1.5;
    }
    #canillas .alert-water-loss .alert-copy strong {
        color: #f26334;
        font-weight: 700;
    }
    
    /* Responsive: reduce levemente en móviles */
    @media (max-width: 767px) {
        #canillas .alert-water-loss {
            padding: 12px 14px;
            gap: 10px;
        }
        #canillas .alert-water-loss .alert-icon {
            flex-basis: 28px;
            width: 28px;
        }
        #canillas .alert-water-loss .alert-copy {
            font-size: 15px;
            line-height: 1.45;
        }
    }
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 18px;
}
.can-fix-img {
    flex: 0 0 140px;               /* ancho fijo del bloque de imagen */
    max-width: 140px;
}
.can-fix-card .can-fix-img img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 110px;             /* proporción similar a la referencia */
}
.can-fix-content { flex: 1; }
.can-fix-card-title {
    color: #00a1de;                /* título celeste, como en la imagen */
    font-weight: 700;
    margin: 0 0 8px;
    font-size: 18px;
}

@media (min-width: 992px) {
    .can-fix-img { flex-basis: 160px; max-width: 160px; }
    .can-fix-card .can-fix-img img { max-height: 120px; }
}
@media (max-width: 767px) {
    .can-fix-card { display: block; margin-top: 25px; }   /* apilar en móvil */
    .can-fix-img { max-width: none; margin-bottom: 10px; }
}


.footer {
    background-color: #4a4a4a;
    width: 100%;
    padding: 15px 0 0;
    margin-top: auto;
}

.footer-container {
    width: 60%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.footer-copyright {
    color: #fff;
    font-size: 14px;
    margin-bottom: 10px;
}

.footer-bottom {
    width: 100%;
    padding: 8px 0;
    text-align: center;
}

.footer-terms {
    color: #009bdb;
    font-size: 14px;
    text-decoration: underline;
}
.azul{
margin-top: 25px;
font-size: 18px;}


@media (max-width: 767px) {
    .azul{
margin-top: 25px;}

.espacio{
margin-top: 25px;}

}