/*
Nombre: Clases personalizadas
Escrito por: 	INTUYA - (https://www.intuya.com)
Version:	9.9.2
*/

.link-hover-border:hover {
	border-bottom: 4px solid #17a2b8 !important;
}

.text-shadow {
  text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8) !important;
}

@media (min-width: 992px) {
    .custom-bordered-column {
        border-left: 1px solid white !important;
    }
}

.custom-hover {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.custom-hover:hover {
    background-color: #ffffff !important;
    color: #001c70 !important;
}

@media (min-width: 992px) {
    .custom-max-width[data-max-width="130px"] {
        max-width: 130px;
    }
    .custom-max-width[data-max-width="140px"] {
        max-width: 140px;
    }
    .custom-max-width[data-max-width="120px"] {
        max-width: 120px;
    }
}

/* Estilos para el header-nav-main en móviles */
@media (max-width: 991.98px) {
    .custom-header-nav {
        padding: 0 !important;
    }
}

/* Estilos para el dropdown-menu en móviles con mayor especificidad */
@media (max-width: 991.98px) {
    ul.dropdown-menu.custom-dropdown-menu {
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
}

/* Estilos para el dropdown-menu en pantallas grandes */
@media (min-width: 992px) {
    .custom-dropdown-menu.dropdown-menu {
        border-radius: 25px !important;
    }
}

.custom-link-hover:hover {
    color: #001c70 !important;
}
/* Estilos para hotspots en dispositivos móviles */
@media (max-width: 991.98px) {
    .hotspot-captacion {
        left: 50%;
        top: 20%;
        --hotspot-translate-x: 50%;
        --hotspot-translate-y: 20%;
        color: #001C70C7 !important;
    }
    .hotspot-potabilizacion {
        left: 75%;
        top: 35%;
        --hotspot-translate-x: 75%;
        --hotspot-translate-y: 35%;
        color: #001C70C7 !important;
    }
    .hotspot-distribucion {
        left: 75%;
        top: 65%;
        --hotspot-translate-x: 75%;
        --hotspot-translate-y: 65%;
        color: #001C70C7 !important;
    }
    .hotspot-depuracion {
        left: 50%;
        top: 80%;
        --hotspot-translate-x: 50%;
        --hotspot-translate-y: 80%;
        color: #001C70C7 !important;
    }
    .hotspot-reutilizacion {
        left: 25%;
        top: 65%;
        --hotspot-translate-x: 25%;
        --hotspot-translate-y: 65%;
        color: #001C70C7 !important;
    }
    .hotspot-retorno {
        left: 25%;
        top: 35%;
        --hotspot-translate-x: 25%;
        --hotspot-translate-y: 35%;
        color: #001C70C7 !important;
    }
}

/* Estilos para hotspots en pantallas grandes */
@media (min-width: 992px) {
    .hotspot-captacion {
        left: 50%;
        top: 20%;
        --hotspot-translate-x: 50%;
        --hotspot-translate-y: 20%;
        color: #001C70C7 !important;
    }
    .hotspot-potabilizacion {
        left: 62%;
        top: 35%;
        --hotspot-translate-x: 75%;
        --hotspot-translate-y: 35%;
        color: #001C70C7 !important;
    }
    .hotspot-distribucion {
        left: 62%;
        top: 65%;
        --hotspot-translate-x: 75%;
        --hotspot-translate-y: 65%;
        color: #001C70C7 !important;
    }
    .hotspot-depuracion {
        left: 50%;
        top: 80%;
        --hotspot-translate-x: 50%;
        --hotspot-translate-y: 80%;
        color: #001C70C7 !important;
    }
    .hotspot-reutilizacion {
        left: 38%;
        top: 65%;
        --hotspot-translate-x: 25%;
        --hotspot-translate-y: 65%;
        color: #001C70C7 !important;
    }
    .hotspot-retorno {
        left: 38%;
        top: 35%;
        --hotspot-translate-x: 25%;
        --hotspot-translate-y: 35%;
        color: #001C70C7 !important;
    }
}

.custom-target-hover .btn {
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.custom-target-hover:hover .btn {
    background-color: #46B5D9 !important;
    border-color: #46B5D9 !important;
    color: #001C70 !important;
}

.custom-border-divider {
    display: flex;
    align-items: center;
    height: 2px;
    width: 130px;
    position: relative;
    left: 0;
    box-sizing: border-box;
}

.custom-border-divider .divider-segment {
    height: 2px;
    background: #46b5d9;
    border-radius: 2px;
}

.custom-border-divider .divider-segment.short {
    width: 5px;
    margin-right: 5px;
}

.custom-border-divider .divider-segment.long {
    width: 105px;
}

.btn-tramites {
    background-color: #ffffff;
    color: #001c70;
    border-radius: 6px;
    border: 1px solid #fff;
    box-sizing: border-box;
}

.btn-tramites:hover {
    border-color: #001c70;
    color: #000000;
}

.wave-separator {
	width: 75%;
	margin: 0;
	display: block;
}
.wave-separator svg {
	width: 100%;
	height: 30px; /* Altura del SVG */
	display: block;
}

.custom-list {
	list-style: none;
	padding-left: 0;
}
.custom-list-item {
	position: relative;
	padding-left: 80px; /* Increased space for larger icon */
	margin-bottom: 0; /* Default: no overlap */
}
.custom-icon-wrapper {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%) rotate(45deg); /* Diamond shape */
	width: 60px; /* Larger size */
	height: 60px; /* Larger size */
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
}
.custom-list-item:nth-child(odd) .custom-icon-wrapper {
	background-color: #d1ecf7;
}
.custom-list-item:nth-child(even) .custom-icon-wrapper {
	background-color: #001c70;
}
.custom-icon-wrapper i {
	transform: rotate(-45deg); /* Counter-rotate icon */
	color: #fff;
	font-size: 30px; /* Larger icon */
}

/* Large screens (lg and up, ≥992px) */
@media (min-width: 992px) {
	.custom-list-item {
		margin-bottom: -10px; /* Overlap effect */
	}
}

.custom-icon-wrapper2 {
	transform: rotate(45deg); /* Diamond shape */
	width: 60px; /* Larger size */
	height: 60px; /* Larger size */
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px; /* Rounded corners */
	margin-bottom: 15px; /* Space between icon and text */
}
.col-12.col-lg-4:nth-child(odd) .custom-icon-wrapper2 {
	background-color: #d1ecf7;
}
.col-12.col-lg-4:nth-child(even) .custom-icon-wrapper2 {
	background-color: #001c70;
}
.custom-icon-wrapper2 i {
	transform: rotate(-45deg); /* Counter-rotate icon */
	color: #fff;
	font-size: 30px; /* Larger icon */
}

.card-hover-especial:hover {
	background-color: #D1ECF7;
	border-color: #001C70;
}