.div-block {
	margin: 0!important;
}
/**************DIRECCION*************/
.div-2col-img-txt > .col-img {
    justify-content: right;
}


.div-2col-img-txt > .col-txt p,
.div-2col-img-txt > .col-txt a {
  color: #FFFFFF;
}

.div-2col-img-txt .col-txt > a:hover {
  color: #28A745 !important;
}

/*Iconos Dirección*/
.i-misbloques-icono {
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1C4E80;
    background-color: #46BCEF;
    min-width: 2em;
    min-height: 2em;
    max-width: 2em;
    max-height: 2em;
	border-radius: 50%;
}


/**************COMO LLEGAR**********/
/* ESTILOS COMUNES PARA AMBAS SECCIONES */
.container-cortina {
	width: 100%;
	max-width: 600px;
	margin: 40px auto;
	position: relative;
	overflow: hidden;
	border-radius: 14px;
	justify-items: center;
}

.container-cortina-cabecera {
	text-align: center;
	font-size: 1.2rem;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.3s ease;
	border-bottom: none;
	border-radius: 14px 14px 0 0;
}

.container-cortina-contenido {
	height: 0;
	overflow: hidden;
	transition: height 0.5s ease-in-out;
	background-color: #f8f9fa;
	border-radius: 0 0 14px 14px;
}

.container-cortina-contenido.open {
	height: 450px; /* Altura del iframe */
}

.container-cortina-contenido iframe {
	width: 100%;
	height: 100%;
	border: none;
}

/* Estilo del botón (ambos botones) */
.container-cortina-cabecera .wp-element-button {
	background: #46BCEF;
	color: #000000;
	border-radius: 16px 0;
	padding: 12px 20px;
	display: inline-block;
	text-decoration: none;
	font-weight: bold;
}

/* Estilo específico para la izquierda (si quieres diferenciar) */
.container-cortina-hidro .container-cortina-cabecera .wp-element-button {
	background: #46BCEF; /* Igual o puedes cambiar */
}

/* Estilo específico para la derecha (si quieres diferenciar) */
.container-cortina .container-cortina-cabecera .wp-element-button {
	background: #46BCEF; /* Igual o puedes cambiar */
}


/**************FORMULARIO**********/

.contenedor-comentarios h3 {
	padding-left: 20%;
}
/* Contenedor principal */
.contact-form-container {
  margin: 1rem 3rem 1rem 3rem;
}

/* Formulario en columna */
.contact-form-container form {
  display: flex;
  flex-direction: column;
  max-width: 600px; /* Limita el ancho máximo */
  margin: 0 auto;   /* Centra el formulario */
}

/* Grupo de campo: etiqueta + input */
.contact-form-container .form-group {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  flex-wrap: wrap; /* Permite que se ajuste en móviles */
  gap: 10px; /* Espacio entre label e input */
}

/* Etiqueta */
.contact-form-container label {
  font-weight: bold;
  color: #FFFFFF;
  flex: 1; /* Ocupa espacio fijo */
  min-width: 120px; /* Ancho mínimo para que no se achique */
  text-align: right; /* Alinea el texto a la derecha */
  white-space: nowrap; /* Evita que se rompa */
}

/* Campos de entrada */
.contact-form-container input,
.contact-form-container textarea {
  flex: 2; /* Ocupa más espacio que la etiqueta */
  width: 300px; /* Ancho fijo para desktop */
  max-width: 100%; /* Para que no se salga en móviles */
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  background-color: white;
  line-height: 1rem;
  font-size: 1rem;
}

/* Ajuste para textarea */
.contact-form-container textarea {
  resize: vertical;
  min-height: 80px;
}

/* Botón */
.contact-form-container button {
  background-color: #003068;
  color: #fff;
  border: none;
  padding: 1rem 1rem;
  cursor: pointer;
  border-radius: 5px;
  font-size: 16px;
  align-self: center; /* Alinea el botón a la izquierda */
  margin: 2rem 0 0 1rem;
}

.contact-form-container button:hover {
  background-color: #28A745;
  color: #FFFFFF;
}

/* Mensajes */
.success-message {
  padding: 10px;
  background-color: #EEEAE7;
  color: #003068;
  border: 1px solid #003068;
  margin-top: 15px;
  border-radius: 5px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.error-message {
  padding: 10px;
  background-color: #EEEAE7;
  color: #721c24;
  border: 1px solid #003068;
  margin-top: 15px;
  border-radius: 5px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Responsive: en pantallas pequeñas */
@media (max-width: 768px) {
	.contenedor-comentarios h3 {
		padding-left: 3rem;
	}
  .contact-form-container {
    margin: 1rem;
  }

  .contact-form-container form {
    margin: 0;
  }

  .contact-form-container .form-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .contact-form-container label {
    text-align: left;
    min-width: auto;
    white-space: normal;
    font-size: 0.9rem;
  }

  .contact-form-container input,
  .contact-form-container textarea {
    width: 100%;
    max-width: 100%;
    font-size: 0.9rem;
  }

  .success-message,
  .error-message {
    width: 100%;
  }
}


