/* RECRUIT / ÚNETE A NOSOTROS */

/* Staff / team cards (reused from Sobre Nosotros) */
.staff-container {
	display: flex;
	justify-content: center;
	gap: 50px;
	max-width: 1600px;
	margin: 40px auto 0;
	flex-wrap: wrap;
}

.staff-card {
	flex: 1;
	min-width: 400px;
	max-width: 500px;
	height: 500px;
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.staff-card:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.2); }

.staff-image-container { flex: 0 0 220px; height: 220px; overflow: hidden; position: relative; }

.staff-card img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: filter 0.3s ease; }
.staff-card:hover img { filter: brightness(0.98); }

.staff-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 25px; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%); color: white; text-align: left; transition: padding 0.3s ease; }

.staff-info h3 { margin: 0 0 5px 0; font-size: 2rem; font-weight: 700; transition: font-weight 0.3s ease; color: white; }
.staff-info .staff-title { margin: 0 0 15px 0; font-weight: 600; color: #55c9cc; font-size: 1.1rem; }
.staff-info p:not(.staff-title) { line-height: 1.5; font-size: 1rem; font-weight: 300; margin-bottom: 0; opacity: 0.9; color: rgba(255,255,255,0.9); }

/* Contact form and layout (copied from styles.css) */
.contact-section {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 60px 20px;
	background-color: #f9f6f1;
}

.contact-container {
	display: flex;
	background-color: #ffffff;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	max-width: 1000px;
	width: 100%;
}

.contact-info {
	flex: 1;
	background-color: #f4f6fc;
	padding: 100px;
	text-align: center;
}

.contact-info h2 {
	font-size: 24px;
	color: #222;
	margin-bottom: 10px;
}

.contact-info p {
	color: #555;
	font-size: 16px;
}

.form-contact {
	flex: 1;
	padding: 40px;
	background-color: #ffffff;
}

.form-contact h2 {
	color: #333;
	margin-bottom: 25px;
	font-size: 22px;
	text-align: center;
}

.form-contact label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	color: #333;
}

.form-contact input,
.form-contact select,
.form-contact textarea {
	width: 100%;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 6px;
	margin-bottom: 20px;
	font-size: 15px;
	transition: border-color 0.3s;
	/* include padding/border inside width so 100% fits the container */
	box-sizing: border-box;
}

.form-contact input:focus,
.form-contact select:focus,
.form-contact textarea:focus {
	border-color: #55c9cc;
	outline: none;
}

.form-contact button {
	width: 100%;
	padding: 14px;
	background-color: #55c9cc;
	color: white;
	border: none;
	border-radius: 30px;
	font-size: 16px;
	cursor: pointer;
	transition: background-color 0.3s;
	box-sizing: border-box; /* ensure button width respects container padding */
}

.form-contact button:hover {
	background-color: #3d9396;
}

/* small responsive tweaks used by this page */
@media (max-width: 768px) {
	.contact-section { padding: 20px 12px; }
	.contact-container { flex-direction: column; padding: 0; }
	.contact-info { padding: 40px; }
	.form-contact { padding: 20px; }
	.contact-info h2 { font-size: 1.6rem; }
}

/* Extra mobile safety: ensure form controls never overflow their container on very small screens */
@media (max-width: 420px) {
	.form-contact input,
	.form-contact select,
	.form-contact textarea,
	.form-contact button {
		max-width: 100%;
		box-sizing: border-box; /* reinforce */
		padding-right: 12px;
		padding-left: 12px;
	}
}

/* Features list (check marks) — exact copy from styles.css to preserve design */
.features-list {
	list-style: none;
	padding: 0;
	max-width: 480px;
	text-align: left;
}

.features-list li {
	display: flex;
	align-items: flex-start;
	font-size: 1.1rem;
	color: #222;
	margin-bottom: 20px;
	line-height: 1.6;
}

.features-list img {
	width: 24px;
	height: 24px;
	margin-right: 15px;
	flex-shrink: 0;
}