/*
 * Sextasis Vistas — frontend.css
 * Estilos propios del plugin, usando las variables de diseño del theme
 * (--clr-primary, --sp-*, --r-lg, etc. definidas en theme.css).
 */

.text-center { text-align: center; }

/* Fila 1: columnas exactas 40% texto / 60% foto (no el 50/50 de Bootstrap) */
.sextasis-qs-row1 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.sextasis-qs-col-text {
	flex: 0 0 40%;
	max-width: 40%;
	padding-right: var(--sp-8, 2rem);
}
.sextasis-qs-col-photo {
	flex: 0 0 60%;
	max-width: 60%;
}

/* Imagen circular — ocupa el 100% de su columna, siempre un círculo
   perfecto (aspect-ratio 1/1 fuerza alto = ancho, sin depender de un
   tamaño fijo en px que se deformaba en columnas angostas) */
.sextasis-qs-circle {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: var(--sh-glow, 0 0 40px rgba(115, 22, 140, 0.45));
}

@media (max-width: 768px) {
	.sextasis-qs-row1 { flex-direction: column; }
	.sextasis-qs-col-text,
	.sextasis-qs-col-photo {
		flex: 0 0 100%;
		max-width: 100%;
		padding-right: 0;
	}
	.sextasis-qs-col-photo { margin-top: var(--sp-6, 1.5rem); }
	.sextasis-qs-circle { max-width: 280px; margin-inline: auto; }
}

/* Espaciado entre las 3 filas de "Quienes Somos" */
.sextasis-qs-row1 { margin-bottom: var(--sp-16, 4rem); }
.sextasis-qs-row2 { margin-bottom: var(--sp-16, 4rem); }
.sextasis-qs-equipo-header { margin-top: var(--sp-16, 4rem); }

/* Íconos de redes en las cards del equipo */
.sextasis-social-icons {
	display: flex;
	gap: var(--sp-2, 0.5rem);
	margin-top: var(--sp-3, 0.75rem);
}
.sextasis-social-icons a {
	text-decoration: none; /* evita el subrayado que aplica .entry-content a a los links */
}

@media (max-width: 768px) {
	.sextasis-qs-circle { width: 220px; height: 220px; }
}