/***Iconos Quienes somos****/

.i-misbloques-icono {
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background-color: #1C4E80;
    width: 2em;
    height: 2em;
	border-radius: 50%;
}
.contactanos {
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
    background-color: #FFFFFF;
    min-width: 2em;
    min-height: 2em;
    max-width: 2em;
    max-height: 2em;
}
.txt-quien {
	background: #ffffff99 !important;
    padding: 1rem;
    border-radius: 8px;
}
.txt-indicador {
	border-radius: 8px;
	border: 1px solid #1C4E80;
	padding: 0.5rem;
	background: #ffffff99;
	min-width: 250px;
	max-width: 250px;
}
.txt-indicador-bold {
	font-weight: bold;
}
/***************FOTOS*************/
.foto {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Evita que la imagen se salga al hacer zoom */
}

.foto img {
  display: block;
  border-radius: 12px;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Transición más natural */
  position: relative;
  z-index: 1;
  overflow: hidden;
  max-width: 100%; /* Evita que se expanda más allá del contenedor */
  max-height: 100%; /* Mantiene proporciones */
  object-fit: cover; /* Importante: corta y rellena sin distorsionar */
  width: auto;
  height: auto;
}

.foto img:hover {
  transform: scale(1.08); /* Zoom suave — 8% más grande */
  box-shadow: 
    4px 0 16px rgba(41, 128, 185, 0.4), /* Sombra azul a la derecha */
    0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave debajo */
  border-right: 4px solid #1C4E80; /* Borde azul sólido a la derecha */
}


/********************INFORMACION PUBLICA***************************/
.contenedor-centro{
	gap: 1.5rem;
	}
.icono-circulo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #3498db, #2980b9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  color: white;
  font-weight: bold;
  margin: 0!important;
}

.icono-circulo:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  background: linear-gradient(135deg, #2980b9, #1a5276); /* Más oscuro */
}
    @media (max-width: 768px) {
	}

/********************BARRA DE REDES SOCIALES*************************/
    /* Contenedor de los iconos */
    .barra-redes-sociales {
        display: flex;
        gap: 16px;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
    }

    /* Estilo base para todos los iconos */
    .social-icon-ini {
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        font-size: 18px;
		
        background-color: #1C4E80;
        color: #fff;
		
        /* Transición suave para todos los cambios */
        transition: all 0.4s ease;
        text-decoration: none!important; /* Elimina el subrayado del enlace */
        /* Asegura que el enlace ocupe todo el contenedor */
        display: flex;
    }

	.social-icon-ini.facebook:hover {
	  background-color: #3b5998;
	  color: white;
	}
	.social-icon-ini.instagram:hover {
	  background-color: #e1306c;
	  color: white;
	}
	.social-icon-ini.twitter:hover {
	  background-color: #1da1f2;
	  color: white;
	}
	.social-icon-ini.youtube:hover {
	  background-color: #ff0000;
	  color: white;
	}

	/* Efecto al pasar el mouse (hover) */
	.social-icon-ini:hover {
		transform: scale(1.1);
	}

/****EFECTO FLIP PARA IMAGENES********/
    /* Contenedor principal de las tarjetas */
	.div-flip{
		padding: 2rem 4rem 5rem 4rem!important;
	}
    .flip-cards-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 30px; /* Espacio entre tarjetas */
      max-width: 1400px;
      width: 100%;
    }

    /* Cada tarjeta individual */
    .flip-card {
      width: 280px;
      height: 280px;
      perspective: 4000px; /* Profundidad 3D */
    }

    .flip-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.3s ease-out;
      transform-style: preserve-3d;
      border-radius: 15px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    }

    /* Efecto de giro: de arriba hacia abajo */
    .flip-card:hover .flip-card-inner {
      transition: transform 0.7s cubic-bezier(0.25, 0.45, 0.45, 0.95);
      transform: rotateX(180deg) translateZ(20px) scale(1.08);
      box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.3), 
                  0 0 30px rgba(255, 255, 255, 0.2);
    }

    .flip-card-front, .flip-card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 15px;
      backface-visibility: hidden;
      color: white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px;
      box-sizing: border-box;
      overflow: hidden;
      transform-style: preserve-3d;
    }

    /* === LADO FRONTAL === */
    .flip-card-front {
      background-color: #1C4E80;
      z-index: 2;
    }

    .flip-card-front .icon-container {
      text-align: center;
    }

    .flip-card-front .icon-container img {
      max-width: 240px!important;
	  height: auto!important;
	  object-fit: contain!important;
	  object-position: center!important;
      transition: transform 0.6s ease-out;
    }

    .flip-card-front .text-container {
      font-size: 1.5rem;
      /*text-transform: lowercase;*/
      font-weight: bold;
      margin-top: 10px;
    }

    /* === EFECTO DE CURVATURA SIN DEGRADADOS === */
    .flip-card-front::before,
    .flip-card-back::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 15px;
      box-shadow: inset 0 20px 60px rgba(0, 0, 0, 0.1),
                  inset 0 -15px 30px rgba(255, 255, 255, 0.15);
      pointer-events: none;
      z-index: 1;
    }

    /* === LADO TRASERO === */
	.flip-card-back {
	  background-color: #1C4E80;
	  transform: rotateX(-180deg);
	  font-size: 1rem;
	  text-align: center;
	  line-height: 1.5;
	  z-index: 1;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  position: relative; /* 🔴 IMPORTANTE: base para absolute */
	  overflow: hidden; /* Opcional: corta el icono si sobresale */
	}

	.flip-card-back .text-container {
	  max-width: 90%;
	  z-index: 2; /* Para que el texto esté por encima */
	}

	/* === MARCA DE AGUA EN ESQUINA INFERIOR DERECHA === */
	.flip-card-back .watermark-container {
	  position: absolute; /* Relativo al .flip-card-back */
	  bottom: -5%;           /* Pegado al borde inferior */
	  right: -5%;            /* Pegado al borde derecho */
	  width: 70%;          /* Tamaño del contenedor de la marca */
	  height: 70%;
	  opacity: 0.3;
	  pointer-events: none;
	  z-index: 1;
	}

	.flip-card-back .watermark-container img {
	  width: 100%;         /* Ocupa todo su contenedor */
	  height: auto;
	  display: block;
	  transform: translate(20%, 20%); /* Ajuste fino: para que solo una parte entre */
	  object-fit: contain;
	}

    /* === EFECTO AL HOVER === */
    .flip-card:hover .flip-card-front::before,
    .flip-card:hover .flip-card-back::before {
      box-shadow: inset 0 30px 80px rgba(0, 0, 0, 0.15),
                  inset 0 -20px 40px rgba(255, 255, 255, 0.2);
    }

    /* === RESPONSIVE === */
    @media (max-width: 768px) {
      .flip-cards-container {
        gap: 20px;
      }
      .flip-card {
        width: 240px;
        height: 240px;
      }
      .flip-card-front .text-container {
        font-size: 1.3rem;
      }
    }

    @media (max-width: 480px) {
      .flip-cards-container {
        gap: 15px;
      }
      .flip-card {
        width: 200px;
        height: 200px;
      }
      .flip-card-front .icon-container img {
        max-width: 40px;
      }
      .flip-card-front .text-container {
        font-size: 1.2rem;
      }
      .flip-card-back .watermark-container img {
        max-width: 50px;
      }
    }

/*********CSS ASTRA*******/

.div-ancho-completo {
	text-align: center;
}
.div-ancho-completo .wp-block-image, 
.div-ancho-completo .wp-block-cover {
	display: block;
}

.div-ancho-completo .wp-block-image img {
    width: 100% !important;
    height: auto !important;
    max-width: none !important; /* ¡Clave! Elimina el max-width impuesto por WordPress */
    box-sizing: border-box;
    vertical-align: bottom;
	object-fit: cover;
    object-position: center;
    display: block;
}

.div-ancho-completo .wp-block-cover h2{
	color: #1C4E80;
}
.div-2col {
	align-items: center!important;
	text-align: center;
    padding: 2rem;
}
.div-2col-izq {
	padding: 3rem;
}
.div-2col-der {
	padding: 0 0 0 3rem;
}
.div-2col-der p {
	text-align: left;
}
.fondo-azul{
	background-color: #1C4E80;
}

.fondo-gris-claro{
	background-color: #e5e7eb;
}

.color-blanco{
	color: #FFFFFF;
}

.color-azul{
	background-color: #1C4E80;
}

h2 {
	padding-top: 1rem;
}
.relleno-4{
	padding: 4rem!important;
}

hr{
	color: #28A745;
}

    /* === RESPONSIVE === */
    @media (max-width: 768px) {
		.div-2col-izq {
			padding: 1rem;
		}
 		.div-2col-der {
			padding: 0;
		}
	.i-misbloques-icono {
		font-size: 30px!important;
	}
	.txt-indicador {
		min-width: 200px;
		max-width: 200px;
	}	

	.relleno-4 {
		padding: 2rem!important;
	}
	.flip-card-front .icon-container img {
		max-width: 150px!important;
	} 
}