#texto_inicio {
    margin-left: 10rem;
    position: relative;
    z-index: 9999;
}

#texto_inicio h2 {
    color: white;
    margin-top: 4rem;
    font-size: 2.5rem;
}

#texto_inicio p {
    font-size: 2rem;
    color: #8e8e8e;
    margin-bottom: 1rem;
}

 /* SERVICIOS */
#contenido {
    overflow: hidden;
	position: relative; 
	background: var(--fondo);
}

#imagen_dron_inicio {
	position: absolute;
	top: 6rem;
	left: 55rem;
	width: 45rem;
}

#seccion {
    max-width: 1200px;
    margin: 0 auto;
    
    border-top: var(--border);
	padding: 4rem 0;

    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Tres columnas iguales */
    gap: 2rem; /* Opcional: Espacio entre las celdas */
}

.imagen_servicio {
	width: 27rem;
    position: absolute;
    top: 1rem;
    right: -6rem;
    z-index: 9999;
    transform: rotate(-5deg);
    user-select: none;
    pointer-events: none;
}

.servicio {
	overflow: hidden;
	position: relative;
	border-radius: 16px;
	border: var(--border);
	background: var(--background_div);
	
	color: #ffb357;

	display: flex;
	flex-direction: column;

	width: 100%;
	min-height: 20rem;
}

.servicio_arriba {
	height: 100%;
    padding: 2rem;
	position: relative;
}

.servicio_arriba .row {
	display: flex;
	justify-content: center;
	align-items: center;
}

.servicio_arriba h2 {
    font-size: 1.6rem;
	margin-bottom: 1rem;
}

.servicio_arriba p {
	width: 60%;

	position: relative;
	font-size: 1.3rem;
    z-index: 999999;
    color: var(--color_p);
}

.servicio_abajo {
	display: flex;
	align-items: center;
	padding: 0 2rem 2rem 2rem;
}

.servicio a {
	bottom: 0rem;
	left: 0rem;

	width: 100%;
	overflow: hidden;
	position: relative;
	background: transparent;
	border: var(--border);
	z-index: 9999999;
	border-radius: 16px;
	font-size: 1.3rem;
	padding: 0.7rem;
	text-decoration: none;
	color: var(--color_p);
	font-weight: bold;
}

.servicio a:hover {
	color: black;
	background: rgb(255, 255, 255);
}

/* RESPONSIVE */
@media (max-width: 800px) {
	
	#seccion {
	    padding: 1rem;
	    display: grid;
	    grid-template-columns: repeat(1, 1fr); /* Tres columnas iguales */
	    gap: 1rem; /* Opcional: Espacio entre las celdas */
	}

	.servicio {
		overflow: hidden;
	}

	.imagen_servicio {
	    display: none;
		width: 20rem !important; 
		top: 0rem;
		right: 0rem !important; 
	}

}