.contenedor-contacto {
		display: flex;
  		align-items: stretch;
		gap: 20px;                     
		background-color: #f8f8f8;
		border-radius: 12px;
		border: 1px solid black;
		padding: 30px;
		margin-bottom: 20px;
	}

	.div-derecho, .div-izquierdo {
		margin-right: 5px; /* Espacio entre los divs */
		border: 1px solid #4e412a;
		border-radius: 12px;
		padding: 20px;		
		background: #fff;
		border: 1px solid #ddd; 
		box-shadow: 0 4px 10px rgba(0,0,0,0.05);
		transition: transform 0.25s ease, box-shadow 0.25s ease;
		display: flex;          /* 👈 convierte cada columna en flex */
		flex-direction: column; /* para que el contenido se apile */
	}

	.div-izquierdo:hover,
	.div-derecho:hover {
		transform: translateY(-3px);
		box-shadow: 0 8px 16px rgba(0,0,0,0.08);
	}

	.div-izquierdo {
    	border-left: 4px solid #b38a4e; 
	}

	.contenedor-formato, .contact_form {
		flex: 1;               /* 👈 ahora se igualan en altura */
	}

	.contenedor-formato {
		background-color: #fff; 
		width: 460px; 
		height: auto;
		margin: 80px auto; 
		border-radius: 10px;  
		padding-top: 30px; 
		padding-bottom: 20px;  
		padding-left: 30px; 
		padding-right: 30px;
		box-shadow: 0 1px 20px #bab8b8;
	}

	.contenedor-formato h2 {	
		font-size: 22px; 
		font-weight: bold; 
		text-align: center; 
		padding-bottom: 10px; 
		padding-top: 10px; 
		color: #000000;
	}

	.contenedor-formato h3 {	
		font-size: 16px; 
		font-weight: bold; 
		text-align: center; 
		padding-bottom: 20px; 
		color: #000000;
	}

	.contenedor-formato p {	
		font-size: 16px; 
		font-weight: normal; 
		padding-bottom: 20px; 
		padding-left: 30px; 
		color: #000000;
		text-align: justify;
	}

	.redes-enlaces-contenedor {
		display: flex;
		gap: 20px; /* espacio entre bloques */
		justify-content: center; /* centrado en horizontal */
		flex-wrap: wrap; /* si no cabe, baja a otra fila */
		margin-top: 20px;
	}

	.redes-item {
		background: #fff;
		border: 1px solid #ddd;
		border-radius: 12px;
		padding: 20px 25px;
		text-align: center;
		box-shadow: 0 2px 6px rgba(0,0,0,0.08);
		transition: transform 0.2s ease, box-shadow 0.2s ease;
		width: 380px;
	}

	.redes-item:hover {
		transform: translateY(-4px);
		box-shadow: 0 4px 12px rgba(0,0,0,0.12);
	}

	.redes-item h3 {
		margin-bottom: 18px;
		font-size: 1.1rem;
		color: #4e412a;
		letter-spacing: 3px;  
        word-spacing: 5px;
	}

	.redes-iconos {
		display: flex;
		justify-content: center;
		gap: 16px;
	}

	.redes-iconos a img {
		width: 36px;
		height: 36px;
		transition: transform 0.2s ease;
	}

	.contact_form {	
		width: 460px; 
		height: auto;
		margin: 80px auto;
		border-radius: 10px;  
		padding-top: 30px;
		padding-bottom: 20px;  
		background-color: #fff; 
		padding-left: 30px; 
		padding-right: 30px;
		box-shadow: 0 1px 20px #bab8b8;
		position: relative;
	}

	input {
		background-color: #fff; 
		width: 408px; 
		height: 40px; 
		border-radius: 5px;  
		border-style: solid; 
		border-width: 1px; 
		border-color: #4e412a; 
		margin-top: 10px;  
		padding-left: 10px;
		padding-right: 10px;
		margin-bottom: 40px; 
	}

	textarea {
		background-color: #fbfbfb; 
		width: 405px; 
		height: 150px; 
		border-radius: 5px;  
		border-style: solid; 
		border-width: 1px; 
		border-color: #4e412a; 
		margin-top: 10px;  
		padding-left: 10px;
		margin-bottom: 30px; 
		padding-top: 15px; 
	}

	label {
		display: block; 
		float: center; 	
	}
		
	.boton-enviar {
		background: linear-gradient(180deg, #c9b387, #1b1c24);
		text-decoration: none;
		text-align: center; 
		font-size: 20px;
		padding: 20px 28px;
		border-radius: 12px;
		font-family: Lato, sans-serif;
		font-weight: 400;
		transition: background-color 0.3s ease;
		border: 2px solid rgba(255,255,255,0.25);
		box-shadow: 0 6px 12px rgba(0,0,0,0.15);
		cursor: pointer;
		color:#ffffff;
		display: inline-block;
		width: 300px;
		height: 70px;
	}

	.boton-enviar:hover {
		background: linear-gradient(180deg, #1b1c24,  #c9b387); /* invertir gradiente suavemente */
		box-shadow: 0 8px 16px rgba(0,0,0,0.25);
		transform: translateY(-2px);
		color:#d4b483;
	}

	.centrar-boton {
		position:absolute;
		bottom: 30px;
		width: 100%;
		display:flex;
		left: 0;
		justify-content: center;
		align-items: center;
	}

	button p {
		color: #fff; 
	}

	.aviso {
		font-size: 13px;  
		color: #0e0e0e;  
	}

	.contact_form h2 {
		font-size: 22px; 
		font-weight: 700;
		text-align: center; 
		padding-bottom: 20px; 
		color: #000000;
	}

	.contact_form h3 {
		font-size: 16px; 
		padding-bottom: 30px;
		color: #000000;  
		font-weight: 700; 
	}

	.contact_form h4 {
		font-size: 14px; 
		padding-bottom: 30px;
		color: #000000; 
		text-align: center;  
		font-weight: 700;
	}

	label {
		font-size: 16px; 
		color: #0e0e0e; 
		font-weight: 700;
	}

	p {
		font-size: 16px; 
		color: #0e0e0e; 
	}

	::-webkit-input-placeholder {
		color: #a8a8a8;
	}

	::-webkit-textarea-placeholder {
		color: #a8a8a8;
	}

	.formulario input:focus {
		outline:0;
	}

	.formulario textarea:focus {
		outline:0;
	}

	.contenedor-contacto > div {
		flex: 1;                  /* 👈 cada columna ocupa el mismo ancho */
	}
	
	.lista-contacto {
		list-style: none;
		padding: 0;
		margin-left: 50px;
	}

	.lista-contacto li {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		font-size: 1rem;
		color: #4e412a;
	}

	.lista-contacto li span {
		font-size: 1.3rem;
		text-indent: -30px;
	}

	.lista-contacto h3 {
		font-size: 16px; 
		padding-bottom: 10px;
		padding-top: 10px;
		color: #000000;
	}

	/* Adaptación móvil */

	@media (max-width: 768px) {
		.contenedor-contacto {
			grid-template-columns: 1fr;
			padding: 20px;
		}
	}

	/*  Ajustes responsive para redes sociales  */

	@media (max-width: 768px) {
		.redes-enlaces-contenedor {
			flex-direction: column;
			align-items: center;
			gap: 15px;
		}

		.redes-item {
			width: 90%;
			max-width: 320px;
			padding: 16px;
		}

		.redes-item h3 {
			font-size: 1rem;
		}

		.redes-iconos a img {
			width: 32px;
			height: 32px;
		}
	}


	/* --- Efecto hover para iconos de redes --- */

	.redes-iconos a img {
		transition: transform 0.25s ease, filter 0.25s ease;
	}

	/* Escala y tono al pasar el ratón */
	.redes-iconos a:hover img {
		transform: scale(1.15);
		filter: drop-shadow(0 0 4px rgba(0,0,0,0.25));
	}

	/* En dispositivos táctiles (cuando se pulsa) */
	.redes-iconos a:active img {
		transform: scale(1.1);
	}