/**************ELEMENTOS ASTRA********************/
/**************CONTENEDORES***********************/
.div-ancho-completo {
	margin: 0!important;
	padding: 0!important;
	margin-left: calc(-50vw + 50%)!important;
	margin-right: calc(-50vw + 50%)!important;
	max-width: 100vw!important;
	width: 100vw!important;
	position: relative;
	left: 0;
	right: 0;
}
/* Asegurar que los elementos internos también ocupen todo el ancho */
.div-ancho-completo > *,
.di-ancho-completo > * {
	width: 100%!important;
	max-width: none!important;
}

.div-ancho-completo .wp-block-image >*,
.div-ancho-completo .wp-block-cover >* {
	width: 100%!important;
	max-width: none!important;
	margin-left: 0!important;
	margin-right: 0!important;

}

/*Alinear botones al centro*/
.div-ancho-completo .wp-block-buttons.is-layout-flex {
	justify-content: center;
}
/*-----------------------*/

/****************/
/*LISTA ENERGIA*/
.lista-energia {
  list-style: none;
}
.lista-energia li {
  text-indent: -1.5rem; /* alinea segunda línea con el texto */
  margin-bottom: 0.6rem;
}
.lista-energia li::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900; /* necesario para los íconos sólidos */
  content: "\e0b7"; /* código unicode del ícono */
  color: #FFD700;
  margin-right: 10px;
  font-size: 0.8rem;
}

/*LISTA AGUA*/
.lista-agua {
  list-style: none;
}
.lista-agua li {
  text-indent: -1.5rem; /* alinea segunda línea con el texto */
  margin-bottom: 0.6rem;
}
.lista-agua li::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900; /* necesario para los íconos sólidos */
  content: "\f043"; /* código unicode del ícono */
  color: #1C4E80;
  margin-right: 10px;
  font-size: 0.8rem;
}

/*-------------------*/
/********CONTENEDORES**********/
/* Contenedor con los elementos a la izquierda y espacios */
.div-block {
    display: block;
	margin: 0;
    padding: 2rem 5% 2rem 5%!important;
}

.contenedor-sombra {
    padding: 2rem;
    background-color: #1C4E8022;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden; /* Necesario para el efecto de borde */
}

/*CONTENEDOR*/
/*Colocar columnas dentro del contenedor en el centro*/
.contenedor-centro {
    display: flex;
    justify-content: center; /* Centra horizontalmente los elementos dentro del contenedor */
    gap: 30px; /* Espacio entre las columnas */
    margin: 20px auto;
	padding: 20px;
    max-width: 1000px; 
}

.columna-igual-altura {
    flex: 1; /* Hace que ambas columnas se expandan igualmente */
    display: flex;
    flex-direction: column; /* Hace que el contenido interno se organice verticalmente */
    min-width: 0; /* Evita problemas de desbordamiento en columnas flex */
	max-width: 400px;
	min-height: 500px;
}

/*Colocar columna a espacio inferior de la primera columna*/
.bajar-15 {
	margin: 15px 0 -15px 0!important;
}

.bajar-30 {
	margin: 30px 0 -30px 0!important;
}

.contenedor-general {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centra horizontalmente */
  gap: 0px; /* Espacio entre imagen y texto */
}

.texto-fondo-ajustado {
  display: block;
  width: fit-content;       /* Toma el ancho del contenido */
  margin: 0 auto;
  margin-top: 10px;
  padding: 10px 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}


.contenedor-unidad {
  display: inline-block;
  padding: 20px 30px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/*Mover el contenedor hacia arriba en el hover*/
.contenedor-mover-arriba:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/*Contenedor Flex Centro*/
.contenedor-flex-centro {
    display: flex;
	flex-direction: column;
	align-items: center;
    text-align: center;
}


/*BOTONES*/
.btn-subrayado a{
	color: #1C4E80!important; 
	background: white!important; 
	text-decoration: underline!important; 
	text-underline-offset: 5px!important; 
	text-decoration-color: #28A745!important;
	}

.btn-subrayado a:hover{
	   color: #28A745!important;
}

/*********CONTENEDORES CABECERA**********/
.contenedor-cabecera {
	display: flex; justify-content: center; align-items: center;
	background-size: contain!important;
    background-position: center;
    background-repeat: no-repeat;
	min-height: 190px!important;
}

/* Para móviles */
@media (max-width: 767px) {
    .contenedor-cabecera {
        background-size: cover!important;
		text-align: center;
    }
}

/**************PAGINAS ESTRUCTURA************/
/*Contenedor bajo cabecera con frase y borde*/
.frase-borde {
  text-align: center;
}

.frase-borde p {
  /* Estilos del párrafo */
  display: inline-block;
  margin: 1rem 3rem 2rem 3rem !important;
  padding: 2rem;
  border-radius: 10px;
  text-align: justify;
  
  /* --- LA CLAVE PARA EL BORDE ANIMADO --- */

  /* 1. Define un borde, pero hazlo transparente. Su grosor será el de la animación. */
  border: 2px solid transparent;

  /* 2. Define DOS fondos: uno sólido para el contenido y otro con el degradado animado. */
  background-image: 
    linear-gradient(white, white), 
    linear-gradient(45deg, #1C4E80, #46BCEF, #1C4E80); /* Fondo del borde (animado) */
  
  /* 3. El fondo se origina desde el borde */
  background-origin: border-box;

  /* 4. Recorta el primer fondo (sólido) al área del padding y el segundo (degradado) al área del borde. */
  background-clip: padding-box, border-box;

  /* 5. Prepara el degradado para la animación */
  background-size: 200% 100%;
  animation: color-border-glow 3s linear infinite;
}

/* Define la animación que mueve el degradado */
@keyframes color-border-glow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


/* === COLUMNAS: 2 columnas con imagen + texto (orden flexible) === */
.div-2col-img-txt {
    align-items: stretch!important;
	gap: 0
}

/* Estilo para la columna de IMAGEN (centrado absoluto en escritorio) */
.div-2col-img-txt > .col-img {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

/* Estilo para la columna de TEXTO (centrado vertical, texto a la izquierda) */
.div-2col-img-txt > .col-txt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    padding: 0 2rem 0 0;
}

.div-2col-img-txt > .col-txt p {
    text-align: justify;
    padding: 0 3rem 0 0!important;
}

/* === Responsive: Móvil (< 768px) === */
@media (max-width: 767px) {
    .div-2col-img-txt {
        flex-direction: column !important;
    }

    .div-2col-img-txt > .col-img,
    .div-2col-img-txt > .col-txt {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        padding: 2rem 2.5rem !important;
        width: 100% !important;
    }

    .div-2col-img-txt > .col-img h2,
    .div-2col-img-txt > .col-txt h2 {
        text-align: center !important;
    }
    .div-2col-img-txt > .col-img p,
    .div-2col-img-txt > .col-txt p {
        padding: 0 2rem!important;
    }

    .div-2col-img-txt .wp-block-image img {
        max-width: 100%;
        height: auto;
    }
	.columna-imagen-fondo { /*Páginas Estructura*/
		width: 75%!important;
	}
}