

.contacto {
	background: var(--color-azul);
	padding: 3rem;
	color: #e8efff;
}
.contacto .container {
	width: min(96vw, 72rem);
	margin-inline: auto;
}

/* === Layout principal === */
.contacto__card {
	display: flex;
	align-items: flex-start;
	gap: 3rem;
}
.contacto__info { flex: 1 1 42%; }
.contacto__form { flex: 1 1 58%; max-width: 60rem; }

/* Lista de links */
.contacto__list {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	display: grid;
	gap: .75rem;
}
.contacto__item {
	display: flex;
	align-items: center;
	gap: .6rem;
}
.contacto__item a {
	color: inherit;
	text-decoration: none;
}
.contacto__item a:hover,
.contacto__item a:focus-visible { text-decoration: underline; }

/* formulario */
.contacto__form{
    display: flex;
    flex-direction: column;

}
.row {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;				
}
.field {
	flex: 1 1 18rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;		
    margin-top: 2rem;		
}


/* Inputs con línea inferior */
.contacto input,
.contacto textarea {
	width: 100%;
	padding: 1rem 0;
	border: none;
	border-bottom: 1px solid rgba(255,255,255,.28);	/* más sutil */
	background: transparent;
	color: #fff;
	outline: none;
	font: inherit;
    min-height: 3rem;
    resize: vertical;
}
.contacto input::placeholder,
.contacto textarea::placeholder { color: #a9b8f3; }

.contacto input:focus,
.contacto textarea:focus,
.contacto input:focus-visible,
.contacto textarea:focus-visible {
	border-bottom-color: #a9d6ff;
	box-shadow: 0 2px 0 0 rgba(169,214,255,.45);
}

/* Botón */
.contacto .btn {
    margin-top: 2rem;
	background: var(--color-verde);
	border: 0;
	border-radius: .5rem;
	padding: .7rem 1.2rem;
	color: var(--color-negro);
	font-weight: 700;
	cursor: pointer;
	transition: transform .12s ease, background-color .12s ease;
}
.contacto .btn:hover,
.contacto .btn:focus-visible { transform: scale(1.04); }
.contacto .btn:active { background: var(--color-celeste); }

/* Responsive */
@media (max-width: 56rem) {
	.contacto__card { 
        flex-direction: 
        column; gap: 2rem; }
}
