/* Añadidos propios sobre la plantilla Ethereal.
 *
 * Regla: no tocar assets/css/main.css (es la plantilla original, sin modificar).
 * Todo lo nuestro vive acá y se carga después.
 */

/* --- Selector de idioma ------------------------------------------------- */

/* Ojo con la posicion y el z-index: main.js de Ethereal inyecta dos .scrollZone
 * fijas de 6rem en los bordes izquierdo y derecho, con z-index 10100, para
 * arrastrar y hacer scroll horizontal. Cualquier cosa que caiga en esa banda con
 * menos z-index se ve pero no se puede clickear: la banda se come el evento.
 * Por eso el selector va por encima (10200) y, ademas, corrido hacia adentro
 * para no pelearse con el arrastre. Debajo de 736px la banda se oculta sola
 * (main.css) y el selector vuelve al borde. */

.lang-switch {
	position: fixed;
	top: 1.25rem;
	right: 7.5rem;
	z-index: 10200;
	display: flex;
	gap: 0.25rem;
	align-items: center;
	padding: 0.35rem 0.6rem;
	border-radius: 2rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	background: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.lang-switch a,
.lang-switch .current {
	padding: 0.15rem 0.45rem;
	border-radius: 1rem;
	border-bottom: 0;
	text-decoration: none;
	color: rgba(255, 255, 255, 0.65);
}

.lang-switch a:hover {
	color: #fff;
}

.lang-switch .current {
	color: #fff;
	background: rgba(255, 255, 255, 0.2);
}

/* Mismo breakpoint en el que main.css oculta las .scrollZone. */
@media screen and (max-width: 736px) {
	.lang-switch {
		top: 1rem;
		right: 1rem;
	}
}

/* --- Ancho de los paneles propios --------------------------------------- */

/* #wrapper es una fila flex horizontal y .panel es flex: 0 0 auto, asi que un
 * panel sin ancho explicito toma el max-content de su texto: en vez de cortar
 * lineas se estira a lo ancho y hay que scrollear metros para leerlo. Los
 * paneles spotlight de la plantilla no sufren esto porque su .content trae
 * .span-5 o .span-7. Los nuestros usan .inner pelado, asi que el ancho se lo
 * ponemos aca — 70rem es lo mismo que vale .span-7. */

.panel > .inner.measured {
	width: 70rem;
	max-width: 100%;
}

/* --- Bloque de identidad ------------------------------------------------ */
/* Este es el bloque que verifica Payoneer: nombre completo, foto y correo.
 * La foto va sin filtros ni tintes de la plantilla — tiene que verse la cara. */

.identity-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2rem;
	margin-top: 1.5rem;
}

.identity-photo {
	width: 12rem;
	height: 12rem;
	flex: 0 0 auto;
	object-fit: cover;
	border-radius: 50%;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25);
}

.identity-details {
	flex: 1 1 18rem;
	min-width: 0;
}

.identity-details p {
	margin: 0 0 0.5rem 0;
}

.identity-name {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.2;
}

.identity-role {
	opacity: 0.8;
}

.identity-contact {
	margin-top: 1rem !important;
	word-break: break-word;
}

.identity-label {
	display: inline-block;
	margin-right: 0.4rem;
	font-weight: 600;
	opacity: 0.8;
}

@media screen and (max-width: 480px) {
	.identity-card {
		gap: 1.25rem;
	}

	.identity-photo {
		width: 9rem;
		height: 9rem;
	}
}

/* --- Formulario de contacto --------------------------------------------- */

.field-error {
	margin: 0.4rem 0 0 0;
	font-size: 0.8rem;
	color: #ff9494;
}

.form-status {
	margin: 1rem 0 0 0;
	font-size: 0.9rem;
}

.form-status.is-ok {
	color: #9be89b;
}

.form-status.is-error {
	color: #ff9494;
}

.form-fallback {
	margin-top: 1.5rem;
	font-size: 0.9rem;
	opacity: 0.85;
}

/* --- Pie ---------------------------------------------------------------- */

#footer {
	padding: 2.5rem 2rem;
	text-align: center;
	background: #21212b;
	color: rgba(255, 255, 255, 0.75);
}

#footer p {
	margin: 0 0 0.5rem 0;
	font-size: 0.9rem;
}

#footer .footer-note {
	margin: 0;
	opacity: 0.6;
}